jQuery + JSONP return empty data?

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

jsfiddle.net/DM77K -- See the error data in your console when you load this JSFiddle. — Jasper
– Jasper, Commented Feb 27, 2012 at 6:39

jamesmortensen · Accepted Answer · 2012-02-27 06:46:52Z

3

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.

edited Feb 27, 2012 at 6:46

answered Feb 27, 2012 at 6:37

jamesmortensen

34.2k11 gold badges102 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Cl' Over a year ago

there is no callback function for json so i dough it its just "page", "limit" and "tags"

Cl' Over a year ago

how would i use server side proxy?

Vigrond Over a year ago

server side proxy is a great idea in this case, as your resource doesn't seem to support crossdomain ajax cals/jsonp. Basically (on your server) you would load the url data and print it out to screen, so that you dont have to go crossdomain to get it through javascript.

jamesmortensen Over a year ago

Then, once you've written code that prints that to the screen, you use your url in the getJSON call. So essentially, your JavaScript calls your server, and then your server goes out to konachan to get the JSON data for you.

Cl' Over a year ago

@jmort253 ok i am lost.. at this point and possibly hit a brick wall here is a code paste: pastebin.com/5gVUviZw for curl-ing the resource into PHP yet no luck

|

Marc · Accepted Answer · 2012-02-27 06:38:07Z

1

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/.

answered Feb 27, 2012 at 6:38

Marc

6,7919 gold badges51 silver badges79 bronze badges

2 Comments

Cl' Over a year ago

alright what would i need to do to push this into XML format? just replace .json in the url to .xml or would it face the same problem as JSON?

jamesmortensen Over a year ago

@cl - You're still facing the same trouble. With XML you are even more limited. You can't make cross domain AJAX calls. Your only option is either buried in the documentation (i.e find the parameter to use to get the padding/function wrapper) or use a server-side proxy to get the JSON and wrap a function around it.

Collectives™ on Stack Overflow

jQuery + JSONP return empty data?

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related