CODEWITHSUNDEEP
javascriptjsonparsing
pendevere
pendevere

Reputation: 637

JSON Parsing Weirdness - Broken or Just Slow?

In jQuery, parsing a bunch of points to draw on a HTML5 canvas. Encountered a strange bug -- but my knowledge of this area is pretty limited so perhaps there's a good explanation.

This works every time:

var json = $.getJSON( "../models/" + id + ".json");

alert("fjkld");

paths = JSON.parse(json.responseText);

This fails every time:

var json = $.getJSON( "../models/" + id + ".json");

paths = JSON.parse(json.responseText);

Anyone have any idea why? Is it because the alert pauses something while the parser 'catches up'? That doesn't make intuitive sense to me but it's the only explanation.

Actually I know this is correct because if I hit "OK" on the alert really fast it fails again.

Can someone please explain to me why this is happening?

Upvotes: 0

Views: 400

Answers (4)

sankargorthi
sankargorthi

Reputation: 369

Put your logic inside the callback.

$.getJson("../models/" + id + ".json", function(response) {
    paths = JSON.pars(response.responseText);
});

Or something like that. As a request API call is an asynchronous call, you have to wait for the server response before you can move forward. That's where callbacks come in. They're called by the asynchronous API when the request is complete. They usually also have success status flags to tell you if your request was successful.

http://api.jquery.com/jQuery.getJSON/

Upvotes: 0

scrappedcola
scrappedcola

Reputation: 10572

You need to set up a callback function in the getJSON call to ensure that the response has had time to complete. In the flow of the ajax call the function that generates the getJSON call continues while the getJSON happens. There is no guarantee that the json request has completed when teh JSON.parse() is being called. The proper syntax for the call is :

jQuery.getJSON( "../models/" + id + ".json", function(data, status, xhr){ JSON.parse(data);} )

Check out the api for the getJson call here: http://api.jquery.com/jQuery.getJSON/

Upvotes: 0

jmbucknall
jmbucknall

Reputation: 2061

This happens because the getJSON call is asynchronous. Once the call to getJSON is complete all you know is that the browser has kicked off the request for the file. You do not know if the request has been completed or not. Sure, the call to the alert function gives the browser enough time (usually) to get the full file, but as you discovered sometimes that's not true.

Far better is to supply a callback that will be called once the file has been downloaded:

$.getJSON(fileName, function(data) {
  paths = JSON.parse(data);
  ..do something with paths..
});

Although note that paths won't be available until the callback executes.

Upvotes: 1

lonesomeday
lonesomeday

Reputation: 237845

getJSON is asynchronous. This means that it returns immediately, before the XMLHTTPRequest has completed. Because alert is a blocking function, all code is halted until you press OK. If you take a while, the request has completed, so responseText is available; if alert isn't present, or you press OK very quickly, the HTTP request has not completed, so the text has not completed.

You need to use a callback function instead: this is a function that will be executed when the AJAX request is complete:

$.getJSON( "../models/" + id + ".json", function(paths) {
    // access paths here
});

See the documentation for $.getJSON.

Upvotes: 2

Related Questions