Displaying jsonp data on web page

Question

I'm trying to display data using jsonp but for some reason it doesn't wanna display on the web page.

function test() 
{
    $.ajax(
    {
        url: "http://localhost/api/company",  //web api is hosted on iss 8
        dataType: 'jsonp',
        success: function (data) 
        {
            $("#test").append(data[5].Company);
        }
    });
}

Please note the data return from the server is just fine. I tested this by executing the test function via google chrome and checking the response in network tab.

What could I be doing wrong here?

Yes. What is its structure? Do you definitely have at least 6 elements in your array? Also, does your code hit the `append` line? — Lee Taylor, Apr 13 '13 at 12:49
Hi lee, the response is XML and yes it does have 6 elements. — Raju Kumar, Apr 13 '13 at 12:53

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

I would suggest you read a good explanation between JSON and JSON with Padding (JSONP) here in order to have a good understanding of what is going on: Can anyone explain what JSONP is, in layman terms?

First off the URL your calling needs to support JSONP. Not all webservices, rest interfaces, etc support it even if they produce JSON.

Secondly, you need to include a ?callback=? in your URL, in order to use JSONP from jquery.

You add ?callback=? to your URL, for example:

var url = 'URL?callback=?';
  $.getJSON(url, function(jsonp){
    $("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
  });

You also need to test if the actual service supports JSONP, and you can do that opening in your browser your webservice with ?callback=something added

http://localhost/api/company?callback=callbackID

If the API supports jsonp you should see in your browser an output like:

callbackID({
    JSON DOCUMENT HERE
});

In the next section I'm including links to show what a standard JSON only response is, and what a JSONP response is.

Live Example Using Twitter API

When you use getJson to send the request and have ?callback=? jquery automatically adds a callback id.

The webserver gets a request such as and wraps the data up wth the callback name (this case "a"):

http://search.twitter.com/search.json?since_id=91770779645124609&q=test&callback=a

If you try the same request without the callback you see only JSON which cannot be consumed cross-site:

http://search.twitter.com/search.json?since_id=91770779645124609&q=test

edited May 23 '17 at 11:49

Community

1
1

answered Apr 13 '13 at 12:46

Menelaos

23,508
18
90
155

Hi Meewok thanks for the replay. Do you know how can i include the callback? – Raju Kumar Apr 13 '13 at 12:48
I believe the web service is configured to accept JSONP request as it is returning data(response can be seen in network tab). – Raju Kumar Apr 13 '13 at 12:49
I've updated the response to answer your questions. If the webservice supports JSONP the output should change when your access via the browser with ?callback= added to the URL. If you want you can provide also the webservice URL and I can have a look. – Menelaos Apr 13 '13 at 12:54
Now the web api is being called like this http://localhost/api/company/jsonp?callback=jQuery19105627042897976935_1365926219165&_=1365926219166 and it returns a bad 400 Bad Request. Does this mean the web api is not configured to accept Jsonp? – Raju Kumar Apr 13 '13 at 12:59
You'll actually just see the JSON as output, without the callback. – Michael Mior Apr 13 '13 at 12:59
400 means the web api is expecting different syntax for your request. – Menelaos Apr 13 '13 at 13:02
@Raju 400 means the web api is expecting different syntax for your request. – Menelaos Apr 13 '13 at 13:04
@Michael Mior Thanks, I added a live example with twitter that shows how the server responds with the callback. – Menelaos Apr 13 '13 at 13:09
Thanks for your help Meewok. The web api is not currently supported to handle jsonp responses as the response returned from it is json. Will need to read some tutorials in order to support jsonp – Raju Kumar Apr 13 '13 at 13:10
YW, if you saw a difference between http://localhost/api/company?callback=callbackID and http://localhost/api/company there's a chance it is supported. Otherwise no :( – Menelaos Apr 13 '13 at 13:14
Nope no difference they are identical. Does WCF support JSONP? – Raju Kumar Apr 13 '13 at 13:16
I think maybe these could help you: http://stackoverflow.com/questions/8219579/how-to-natively-enable-jsonp-for-existing-wcf-service http://bendewey.wordpress.com/2009/11/24/using-jsonp-with-wcf-and-jquery/ – Menelaos Apr 13 '13 at 13:18

Displaying jsonp data on web page

1 Answers1