Displaying JSON won't work

Question

Take a look at this fiddle : http://jsfiddle.net/3JRU6/

$(document).ready(function(){
var url='http://api.worldbank.org/topic/4?per_page=10&format=json&callback=?';
var query;
  $('button').click(function(){
    $.getJSON(url,function(json){
      $.each(json.results,function(i,data){
          window.alert("found");
         $("#results").append('<p>'+data.value+'</p>');
      });
    });
  });
});

I want to connect to the worldbank's opendata but when I hit the button, nothing happens. I've tried the same script with the twitter API and then it did work. The original link is without the &callback=? but I had to add it because I got an error.

Thanks in advance!

As you can see from the response, the server does not return JSONP, so you cannot access it with Ajax. Maybe their API uses a different keyword than `callback`, you should check their documentation. — Felix Kling, Aug 14 '12 at 09:35
You have included `getJson.js` but I am surprised how it may work in their site. — sundar, Aug 14 '12 at 09:38
Not sure if this helps, but on taking out the `callback=?` parameter from the `url`, I get an error in the console as such: `XMLHttpRequest cannot load http://api.worldbank.org/topic/4?per_page=10&format=json. Origin http://fiddle.jshell.net is not allowed by Access-Control-Allow-Origin.` — bPratik, Aug 14 '12 at 09:40
You might want to read this: http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain — Felix Kling, Aug 14 '12 at 09:41

Guffa · Accepted Answer · 2012-08-14T09:57:05.287

The getJSON method will make a JSONP call if the URL contains a callback property.

"If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead."

Ref: http://api.jquery.com/jQuery.getJSON/

The request works fine, and the data arrives to the browser, but as the response is JSON and not JSONP, the data is just discarded and the success callback method will not be called.

I tried to change format=json to format=jsonp in the URL, but the response is an error message:

<fault>
        <faultstring>Fault raised in a policy</faultstring>
        <detail>
            <errorcode>31326</errorcode>
                <trace>
                    Fault Name: JSONP Bad Request
                    Error Type: MessageRouter
                    Description: Fault raised in a policy
                    Service: worldbank
                    Endpoint: target
                    Operation (Target):defaultOperation
                    FlowTransitionState : Target_Request_User_Error
                    Policy : EnforceMediationOnRequestPolicy
                    RaiseFaultAssertion
                </trace>
        </detail>
</fault>

You have to check with your API provider on how to make a JSONP request instead of a JSON request.

Edit:

As Jimmy Oliger says, the API uses a prefix property instead of callback. I tried this, and jQuery actually uses that property instead, and the success callback is called.

The response is an array where the first item is paging information, and the second item is the array containing the data, so loop json[1] to show the data:

Demo: http://jsfiddle.net/Guffa/3JRU6/4/

var url = 'http://api.worldbank.org/topic/4?per_page=10&format=jsonp&prefix=?';
var query;
$('button').click(function() {
    $.getJSON(url, function(json) {
        $.each(json[1], function(i, data) {
            $("#results").append('<p>' + data.value + '</p>');
        });
    });
});

score 3 · Answer 2 · answered Aug 14 '12 at 09:48

Wordbank API do not use the callback attribute to output response as JSONP, you've to add format=jsonP&prefix=? at the end of the URL to make it work.

You can found more information about "Request Format" here.

var url = 'http://api.worldbank.org/topic/4?per_page=10&format=jsonP&prefix=?';

$.getJSON(url, function(data) {
  console.log(data);
});

Displaying JSON won't work

2 Answers2

Edit: