Getting JSON value with jQuery's getJSON

Im trying to get a json value with the getJSON method.

var myurl = 'http://otherdomain.com/api.json?value=something&callback=?';
$.getJSON(myurl,function(data){
    console.log('successful!');

}).error(function(){
    console.log('Error message: ' + e.statusText);
});

The end result is: Error message: success instead of the json data, although the network response does show the json data in the developer console. E.g. of response data:

[{"First":"John","FirstLength":[4],"Last":"Doe","LastLength":[3]}]

If I do open the link directly from the browser, it loads fine.

If I remove the &callback=? I get this message:

XMLHttpRequest cannot load http://otherdomain.com/api.json?value=something. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

What other options do I have to avoid this problem? Thanks

Answer

I initially answered this question believing that the URL was invalid due to the second '?' character. Since attracting a negative vote I realise my error and that this is standard JSONP syntax for using a randomly generated callback function name by JQuery.

So I did some research to make up for my original naff post and have some ideas for you.

The response data you mentioned [{"First":"John","FirstLength":[4],"Last":"Doe","LastLength":[3]}] is valid JSON from what I can see. However according to this post about Bug with json4j it looks like some libraries may incorectly handle your response beginning with a sqaure bracket. Does your problem go away if you remove the leading and trailing square brackets so that you are returning a single javascript object to your callback function rather than an array?

From reading the following two excellent posts it looks like you don't get the standard JQuery error handling you would normally get (as you described)

http://www.fbloggs.com/2010/07/09/how-to-access-cross-domain-data-with-ajax-using-jsonp-jquery-and-php/

Because JSONP relies on the script tag, it doesn’t use the callback features of the underlying HTTPRequest object. This means the success, failure, complete callback functions on the $.ajax() method are irrelevant and nonfunctional when you use JSONP.

http://www.ibm.com/developerworks/library/wa-aj-jsonp1/

First and foremost, there is no error handling for JSONP calls. If the dynamic script insertion works, you get called; if not, nothing happens. It just fails silently.

From these posts, the other suggestion I have is trying to be explicit about the dataType being returned as being JSONP. JQuery's $.ajax may behave differenlty to $.json. So try using an explicit callback function like this...

$.ajax({

   url: surl,
   data: {id: id},
   dataType: "jsonp",
   jsonp : "callback",
   jsonpCallback: "jsonpcallback"
   });

This last suggestion requries JQuery 1.4+