JSON parsing using jquery

Question

I am trying to parse a simple JSON file. I am very new to javascript, JSON and jquery. I would like to extract the information in a JSON file so that I can use it later using protovis. My JSON is well formed and tested in JSON lint .

I am trying to accomplish this by parsing a responseText JSON object, for example:

var json = $.getJSON("week_13.json").responseText; var week13 = $.parseJSON(json); 

in the hope that week 13 is what I can access. Just to point out, I'm not trying to use the callback function in a call to $.getJSON , since I would like to just access the variables so that I can build them later.

I use Chrome and its console to try to figure out what is going on. In this code, the json variable appears as an empty string. However, if I write in the javascript console in Chrome:

 var json = $.getJSON("week_13.json"); 

json is an XMLHttpRequest object, and its responseText attribute is a large string containing my JSON.

 var text = json.responseText; 

is a nice line, and then if I call jquery parser

 var data = $.parseJSON(text); 

then data now the desired object. However, if I copy and paste my original two lines into the console, I’m out of luck, and if I use the extended version from the json , text and data variables on my original web page, this will not work:

 var json = $.getJSON("week_13.json"); var text = json.responseText; var data = $.parseJSON(json); 

In this case, text is an empty string.

I am completely confused. If someone could tell me what I am doing wrong and give some guidance on how to do this work, I would be very happy! Please let me know if any other information on how I do this is required to answer the question!

Answer 1

$.getJSON() is asynchronous. You need to provide a callback function to handle the result. See the doc API for examples of callback functions.

If you really need your synchronous call (it will block the browser while you wait for the result), you can do this instead:

 var url = "week_13.json" var data = jQuery.parseJSON( jQuery.ajax({ url: url, async: false, dataType: 'json' }).responseText ); 

Answer 2

In $ .getJSON you do not need to call parseJSON when using the full parameter. I use it like this:

  $.getJSON('myjson.json', null, function (json_object) { // here it is already a json_object alert(json_object.text); }); 

$ .getJSON already parses responseText in the JSON object.

Answer 3

$.getJSON function makes all calls asynchronously by default, so this function returns nothing. although there is a parameter to this function that takes a callback and returns the data of the callback function. see example below.

Another problem of program flow synchronization can be solved by stopping all your functions before calling getJSON , and then start working again when you receive the data in the callback.

You can also use a global variable to store json and use anywhere in the program.

 var json = null; // the global variable to store json returned from file // stop all your work here. // I mean do not perform any more actions here. // make an ajax call to get the json data $.getJSON('week_13.json', function (jsonData) { // assign the data to global json variable. json = jsonData; // now call your other function to manipulate json // now resume your work here, // and perform other actions which are dependent on json. });