How to read from an API

Question

I want to log the data that is stored in an URL as JSON with an AJAX call.

$.ajax({
       "url": "https://api.logair.unige.ch/v1/service/device/latest?device_id=LAEM_02&latest=1",
       "method": "GET",
       "crossDomain": true,
       "dataType": 'jsonp',
       "headers": {
       'Access-Control-Allow-Origin': '*'
    },
    success: function(response) {
       console.log(response)
    },
    error: function(error) {
       console.log(error);
    }
});

But I'm getting:

Object { readyState: 4, getResponseHeader: getResponseHeader(e), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(e, t), overrideMimeType: overrideMimeType(e), statusCode: statusCode(e), abort: abort(e), state: state(), always: always(), catch: catch(e), … }

instead of the JSON that you can find in the URL.

If I change from jsonp to json I get `Access to fetch at 'https://api.logair.unige.ch/v1/service/device/latest?device_id=LAEM_02&latest=1' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.` — ciaodejan, Oct 31 '20 at 06:15
seems like the api server only responds to 'jsonp' request but does not wrap response in a callback function. Ideally when a jsonp request is made, a callback is added to request and the server should wrap response in that callback. See this answer https://stackoverflow.com/questions/5359224/parsererror-after-jquery-ajax-request-with-jsonp-content-type , Currently in the network tab you can see the server responds with valid json which jquery is not expecting, thats why it calls error function insted of success — Akash Sarode, Oct 31 '20 at 07:50

score 0 · Answer 1 · answered Oct 31 '20 at 08:56

I'm not familiar with JSONP, but I when I execute your API call, the response in the browser network debugger looks like usual json to me

[{"transaction_id":363287,"timestamp_nix":1604087391821,"device_id":"LAEM_02","latitude":46.2111884,"longitude":6.1422013,"altitude":440,"speed":0.06644406914711,"heading":333,"temperature":22.1,"relative_humidity":39.6,"pressure":98066.1,"pm_1":null,"pm_2_5":12,"pm_4":null,"pm_10":15,"extra_data":[],"mobile_api_key_id":null}]

As far as I understand JSONP it should return something like callback({...}).

Also if you modify your error callback:

error: function(r,e,m) {
   console.log("r:",r);
   console.log("e:",e);
   console.log("m:",m);
}

I becomes clear that the response cannot be parsed as JSONP:

r: {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: 
ƒ, overrideMimeType: ƒ, …}
e: parsererror
m: Error: jQuery112407275383630150669_1604133626031 was not called
    at Function.error (jquery.min.js:2)
    at b.dataTypes.<computed>.b.converters.script json (jquery.min.js:4)
    at Xb (jquery.min.js:4)
    at y (jquery.min.js:4)
    at HTMLScriptElement.b.onload.b.onreadystatechange (jquery.min.js:4)

Because no callback function (jQuery112407275383630150669_160413362603) was called in the response.

Long story short: Your backend seems to be faulty.

How to read from an API

1 Answers1