CODEWITHSUNDEEP
javascriptjqueryjsonjsonp
Cl'
Cl'

Reputation: 1653

jQuery + JSONP return empty data?

Ok for some reason my script does not return any data from a JSON file witch is being fetched from 3rd party site.

Here is the code 

$(document).ready(function() {
    var url =  "http://konachan.net/post/index.json?limit=20&tags=hatsune_miku";
    $.getJSON(url + "&callback=?", null, function(items) {
        for(i in items) {
            item = items[i];
                        $("#content").append('<div class="product" id="product-' + item.id + '"><img src="' + item.preview_url + '" width="135" height="138"/><div class="title">' + item.author + '</div><div class="description" style="overflow:hidden;">' + item.tags + '</div><div class="clear"></div></div>');
        }
    });
});

What the heck is wrong with it?

Edit: PHP Curl still no work: http://pastebin.com/5gVUviZw

Upvotes: 1

Views: 1496

Answers (2)

jamesmortensen
jamesmortensen

Reputation: 34038

I hit the url http://konachan.net/post/index.json?limit=20&tags=hatsune_miku&callback=test with a callback parameter, and I do not see the JSON wrapped in a function name.

The way JSONP works is when you pass a callback function name, the server should wrap the JSON in that function so that when the JavaScript is returned from the server, the callback function is called, and the JSON data is passed in as a parameter.

// "test" was the callback parameter I used
test({ "my": "data" , "returned_from" : "server" });

Under the hood, JSONP uses script elements to download the JavaScript (JSON) from the remote server.

Since the JSON in your url isn't being wrapped in a function name, you can't get easy cross-domain access to it. Here is the Wikipedia Article on JSON with Padding, which explains in more detail.

Perhaps you might check the documentation of that particular resource, as it's quite possible they're using a parameter other than "callback" to specify a callback function to "pad" the data with.

If there is no parameter to wrap the result in a function name, you could use a server-side proxy to obtain the JSON response and wrap it up in a function, which you then return to the client side.

Upvotes: 3

Marc
Marc

Reputation: 6771

Because the code returned from the 3rd party site is obviously not made for a JsonP call - it just returns an array with data like []. But it should return this array and invoke a js function so your script can access the data like myCallbackFunc([]).

Search for jsonp on this page for more info http://api.jquery.com/jQuery.ajax/.

Upvotes: 1

Related Questions