Handling JSONP data in jQuery/javascript

Question

I have a small script that gets some JSONP data from the server. I want to access various values in that response data. I don't know how to do it.

After reading some articles I am confused. I read from this website that JSON.stringify() will create JSON. So it means the server is not returning JSON in my case?

Because if I do data= JSON.parse(response); the alert() doesn't work. Also if I change the dataType to json I get some authentication error from server. After all this I finally figured out how to alert the server's response.

jQuery code:

getData = function(){
    var urlink = "https://192.168.150.3/loc/102?jsonpCallback=myCallback";
    $.ajax({
        type: "GET",
        url:  urlink,
        dataType:"jsonp",
        async: false,
    });
}

myCallback = function(response){
        data= JSON.stringify(response);
        alert(data);
        }

The output I get from above script due to alert is like this:

  {
    "request":"/loc/102?jsonpCallback=myCallback&callback=jQuery21106404822329059243_1410515165630&_=1410515165633",
    "response":
      {
        "id":102,
        "name":"Location 1",
        "child":[
          "\/child\/CSJ01",
          "\/child\/CSJ02",
        ],
        "stats":{
          "pow":{
            "instant":8.39
          },
          "cTemp":{
            "instant":22.76
          },
          "rTemp":{
          },
          "b":{
            "instant":1
          },
          "m":{
            "instant":1410513940
          }
        }
      }
  }

Question: How can I access the values of id, name, child, the value of instant in pow, the value of instant in cTemp etc. ?

I have found some solutions about how to get these values in JSON but they didn't work for me. For eg: This example. In most of the examples they first use JSON.parse() and then get the specific values, but in my case JSON.parse() does nothing, so these examples didn't help a lot OR maybe I am extremely confused and lost. Any suggestions will be appreciated.

You have to access the response inside your response. Because the whole JSON object gets stored in the success(response) 'response' variable, you have to access it by doing response.response.id. It would be like this: success(JSONOBJECT){ alert(JSONOBJECT.response.id)}; (AKA your response variable in the JSON has nothing to do with the response variable from the AJAX request) — somethinghere, Sep 12 '14 at 10:23
You can't use credentials or request headers with jsonp. jsonp is a old risky fashion way of loading data cross domains. it basically appends a script tag with a function that it should call. if You want to do it right you should use just json and enable enable cross-origin resource sharing — Endless, Sep 12 '14 at 10:27
@somethinghere In my case the success is never being executed, even if I remove my custom callback parameter from the url. The alert() in success is never alerting. So, I can't do response.id and all that things — ρss, Sep 12 '14 at 10:42

Vinz243 · Answer 1 · 2014-09-16T14:40:20.153

0

The JSONP method isn't real ajax so you can't set withCredentials and custom headers. In fact it create a script element with the response to deal with CORS (so you can't make request to other sites in a website without the target explicit authorization)

A JSON request would create a script like this:

<script src="https://192.168.150.3/loc/102?jsonpCallback=myCallback">
</script>

And then the data returned would be:

myCallback({...});

Instead of this:

{...}

So you can set custom headers.

Now, if you want credentials and headers just use json, but your server will have to handle CORS properly.

And there is an issue between your 2 callbacks. You define one and jquery defines another (b/c jquery append the callback query) so the newly created script tag will only call one method, thereby the success callback OR myCallback but not both So try this:

getData = function(){
    var urlink = "https://192.168.150.3/loc/102";
    $.ajax({
        type: "GET",
        url:  urlink,
        dataType:"jsonp",
        async: false,
        success: function(data) {
            data = JSON.stringify(response);
            alert(data);
        }
    });
}

edited Sep 16 '14 at 14:40

answered Sep 12 '14 at 10:26

Vinz243

9,654
10
42
86

If I use developer tools in google chrome and in network tab I see the response from server as you mentioned like this `myCallback({...});`. But my question is how to get those values using jQuery. If I comment out the success callback still nothing changes. – ρss Sep 12 '14 at 10:35
I tried this. I am getting response from the server. I can see that in the developer tools. It gives something like {...} instead of myCallback({...}); But the problem is how to get those values into some variables so that I can do something better with them. – ρss Sep 12 '14 at 10:48
Yes, as in my request I am doing `dataType:"jsonp",` if I do `dataType:"json",` I get error and no data is received from the server. – ρss Sep 13 '14 at 18:08
We can discuss this tomorrow when I am at work, because the server can't be accessed from the remote locations. The code in my question is working fine, I get the response from the server and I alert it. Next, I only want to extract some values and store them into different variables. This is where I am struck. – ρss Sep 14 '14 at 09:03
Tried. There is no alert becuase now my callback is not being called. I checked in the developer tools in chrome, I can see that server is responding with the data correctly! The response is same as shown in my question. – ρss Sep 16 '14 at 14:14
I tried your edit. The alert never happens. But in the developer tools I can see the response from the server, is fine. – ρss Oct 13 '14 at 10:24
I removed async and tried. Nothing changed. The response is coming from the server and it is accurate as observed in the developer tools. But I have no success to extract the values individually from the response in jQuery. :( – ρss Oct 16 '14 at 15:04

Handling JSONP data in jQuery/javascript

1 Answers1