Question

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

Answer 1

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.