Question

I am trying a straightforward remote json call with jquery. I am trying to use the reddit api. http://api.reddit.com. This returns a valid json object.

If I call a local file (which is what is returned from the website saved to my local disk) things work fine.

$(document).ready(function() {     $.getJSON('js/reddit.json', function (json) {         $.each(json.data.children, function () {             title = this.data.title;             url = this.data.url;             $('#redditbox').append('<div><a href=\'' + url + '\'>' + title + '</a><div>');         });     }); }); 

If I then try to convert it to a remote call:

$(document).ready(function() {     $.getJSON('http://api.reddit.com', function (json) {         $.each(json.data.children, function () {             title = this.data.title;             url = this.data.url;             $('#redditbox').append('<div><a href=\'' + url + '\'>' + title + '</a><div>');         });     }); }); 

it will work fine in Safari, but not Firefox. This is expect as Firefox doesnt do remote calls due to security or something. Fine.

In the jquery docs they say to do it like this (jsonp):

$(document).ready(function() {     $.getJSON('http://api.reddit.com?jsoncallback=?', function (json) {         $.each(json.data.children, function () {             title = this.data.title;             url = this.data.url;             $('#redditbox').append('<div><a href=\'' + url + '\'>' + title + '</a><div>');         });     }); }); 

however it now stops working on both safari and firefox. The request is made but what is return from the server appears to be ignored.

Is this a problem with the code I am writing or with something the server is returning? How can I diagnose this problem?

EDIT Changed the address to the real one.

Answer 1

The URL you are pointing to (www.redit.com…) is not returning JSON! Not sure where the JSON syndication from reddit comes but you might want to start with the example from the docs:

$(document).ready(function() {   $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?', function (data) {     $.each(data.items, function(i,item){         $('<img/>').attr('src', item.media.m).appendTo('#redditbox');         if ( i == 4 ) return false;       });  }); 

});

(apologies for formatting)

EDIT Now I re read your post, I see you intended to go to api.reddit.com unfortunately you haven’t got the right parameter name for the json callback parameter. You might need to further consult the reddit documentation to see if they support JSONP and what the name of the callback param should be.