How to save JSON response in jQuery?

Question

I would like to save the json response in a global variable, so I could use it through my application without making a getJSON request more than once.

var data; $.getJSON("panorama.json",function(json){ data = json.images[0].src; console.log(data); }); console.log(data); 

If I register it in the actual request, it will be fine, but I get "undefined" everywhere. Any comment is appriciated.

Edit [copied from comments]: I tried ...

 $.myglobals = { result: "unset" } $(document).ready(function() { $.getJSON( "panorama.json", function(json) { $.myglobals.result = json.images[0].src; console.log($.myglobals.result); }); console.log($.myglobals.result); }) ; 

The first log is fine, the second is undefined.

Edit [copied from answer]:

in fact both methods worked

Interestingly, my request was in a function, and I tried to access my global variable after the request in the same function

when i got it out of function it worked like a charm

Answer 1

If your real code is structured like this, then you have a problem trying to access data that has not yet been installed. Just because your $.getJSON() above console.log() does not mean that you will get a response before registering the data value.

So your problem is not an area, but rather a time: introduce some server-side delay, and your solution may also crash.

Maybe you should set some flag if the answer is received:

 var data, dataReceived = false; $.getJSON("panorama.json",function(json){ data = json.images[0].src; dataReceived = true; console.log(data); }); // somwhere later if (dataReceived) { console.log(data); } else { // you could use setTimeout() or setInterval here to re-check console.log("data not received yet"); } 

Answer 2

You can insert it into an attribute in the DOM (for example, #ID) and get it as needed.

Answer 3

Here is an approach that allows you to set a variable in one document $ (document) .ready () and use it in another document $ (document) .ready (). myglobals is a namespace object that probably reduces the chances of your global variable colliding with a stranger, especially if you call it something smarter than "myglobals".

 $.myglobals = { result: "unset" } $(document).ready(function() { function pretend_JSON_call() { $.myglobals.result = {'a':"hello", 'b':"world" }; } pretend_JSON_call(); }); $(document).ready(function() { alert($.myglobals.result['a']); alert($.myglobals.result['b']); }); 

Transitional link to the above code in jsbin.

Answer 4

$. getJSON starts an ajax request (the keyword in the question area is asynchronous). Your variable is undefined, because it is not defined yet, the answer is not yet complete. Other people have suggested moving the console below into their code, but there is no guarantee that it will be used if your logic does not synchronize with the callback function. $ .getJSON takes a callback function as one of its parameters.

 $.getJSON( "myData.json", function( data ) { //Do whatever, this is a callback $.each( data, function(key, val) { //You can get even more specific like so }); });