Getting JSON value with jQuery's getJSON

Question

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

possible duplicate of [can jquery ajax call external webservice?](http://stackoverflow.com/questions/727183/can-jquery-ajax-call-external-webservice) — JMax, Dec 12 '11 at 14:08
Your URL has two `?`, maybe this is the problem. If the `?` in `callback=?` is the expected value, you should encode it. — Didier Ghys, Dec 12 '11 at 14:08
@DidierG. not quite. Look this http://api.jquery.com/jQuery.getJSON/ search for callback=? — Andres SK, Dec 12 '11 at 14:14
though example here:http://docs.jquery.com/Release:jQuery_1.2/Ajax#Cross-Domain_getJSON_.28using_JSONP.29 says, it should work. — Nakul, Dec 12 '11 at 14:39

score 1 · Accepted Answer · edited May 23 '17 at 12:11

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+

my problem did go away when i removed the square brackets on an example json. However, I do not control the json of the other domain :s -- — Andres SK, Dec 12 '11 at 16:42
@andufo Glad I could help out in narrowing down the issue further. One possible solution is to call the otherdomain from your server and strip out the offending characters before passing back to the client. A bit of a hack, but can't think of anything else of hand at the moment — Brad, Dec 12 '11 at 17:10
that works but forces my server to do extra work :) thanks for the help! — Andres SK, Dec 12 '11 at 17:36

score 0 · Answer 2 · answered Dec 12 '11 at 14:15

0

I could be wrong here... but you know you are calling the jQuery.error method... as in you are throwing an error message yourself not handling an error callback on your getJson.

answered Dec 12 '11 at 14:15

scottheckel

9,106
1
35
47

you only fall in that method if there is an actual error. Still the e.statusText value throws "success". – Andres SK Dec 12 '11 at 14:22

score 0 · Answer 3 · answered Dec 12 '11 at 14:34

would something like this do:

function fetch_feed(url){
        var newScript = document.createElement('script');
        newScript.type = 'text/javascript';
        newScript.src = url;
        jQuery('body').append(newScript);
    }

function successMethod(data){
    console.log('successful!');
}

fetch_feed("http://otherdomain.com/api.json?value=something&callback=successMethod");

Getting JSON value with jQuery's getJSON

3 Answers3