JavaScript get data from json to a global variable

Question

function test(){
    $.getJSON( "notebook-json-data.php", function( data ) {
       var myData = data;
    });
 }

Here in my function i get json objects, but i want to access myData variable from out side the scope of its function.

I have tried setting var myData outside the function but no luck.. :(

I am not familiar with JSON, did i need any parsing?

how to set this variable as global??

Please help...

Answer 1

Don't try to set myData as a global variable - it won't work because getJSON is asynchronous. Either use a promise :

function test() {
  return $.getJSON('notebook-json-data.php');
}

$.when(test()).then(function (data) {
  console.log(data);
});

Or a callback:

function test(callback) {
  $.getJSON('notebook-json-data.php', function (data) {
    callback(data);
  });
}

test(function (data) {
  console.log(data);
});

Edit

Since you want to use the data in other areas of your code, use a closure to create an environment where your variables don't leak out into the global space. For example, with the callback:

(function () {

  var myData;

  function test(callback) {
    $.getJSON('notebook-json-data.php', function (data) {
      callback(data);
    });
  }

  test(function (data) {
    myData = data;
    autoPopulate('field', 'id');
  });

  function autoPopulate(field, id) {
    console.log(myData);
  }

});

myData is cached as a global variable specific to that closure . Note the other functions will only be able to use that variable once the callback has completed.

Answer 2

Instead of creating global variables, it's better to call a callback on "done", like this:

$.getJSON( "example.json", function(data) {
    console.log( "json loaded" );
    foo(data); 
})
.done(function() {
   console.log("");
   foo1(data);
});

For more information, getJSON API .

The problem is that getJSON is asynchronous, so while getJSON is processing data, the execution of your code goes on.

function test(a){
    $.getJSON( "notebook-json-data.php", function( data ) {
       a = data;
    }
}

var main = function() {
  var a; 
  test(a);         /* asynchronous */
  console.log(a);  /* here, json could be hasn't already finish, most likely, so print 'undefined'   
}

Answer 3

You can make use of callback in order to get the data out of the success block

function test(callback){
    $.getJSON( "notebook-json-data.php", function( data ) {
       callback(data);
    }
 }

test(function(data){
  //Use your data here
});

Answer 4

Declare a global json object

var APP = APP || {}

Now u can set the dynamic data to that object using

APP.myData = data;

You can get this anywhere in your js file. by using

APP.myData