CODEWITHSUNDEEP
javascripthtmljsonjsonp
Boyye
Boyye

Reputation: 291

Displaying JSON won't work

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!

Upvotes: 0

Views: 501

Answers (2)

Guffa
Guffa

Reputation: 700422

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>');
        });
    });
});

Upvotes: 4

Jimmy Oliger
Jimmy Oliger

Reputation: 71

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);
});​

Upvotes: 3

Related Questions