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...

var myData outside the function, no repetition of var inside the function (this would create a new shadowed myVar). Bear in mind the call is asynchronous so you can't simply access it after the getJSON call — Alex K.
– Alex K., Commented Jul 23, 2014 at 11:18
Don't pollute the global scope with variables. Pass a callback into test() instead — CodingIntrigue
– CodingIntrigue, Commented Jul 23, 2014 at 11:18
You can set it to a global all you want, it stil won't be accessible outside the callback as ajax is asynchronous! — adeneo
– adeneo, Commented Jul 23, 2014 at 11:20
There might be case that you are trying to read variable before getJSON method finished with reading JSON. It is async call. You need to wait until this function completes its process. — Pramod S. Nikam
– Pramod S. Nikam, Commented Jul 23, 2014 at 11:23

Andy · Accepted Answer · 2014-07-23 13:42:31Z

16

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.

edited Jul 23, 2014 at 13:42

answered Jul 23, 2014 at 11:23

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Hareesh Over a year ago

I want data to use is several other functions.. if i did so, will this send json request to server each time?

Hareesh Over a year ago

function autoPopulate(field,id){ test(function (data) { myData = data; console.log(myData); }); } when i call the function several times in my html,is a request send to the server each time to load "notebook-json-data.php"?

Hareesh Over a year ago

any possible way to cache the data or preload first time and use?

Andy Over a year ago

My edit allows you to cache the data in myData - a variable that is global but only to that closure.

Andrew Laino · Accepted Answer · 2016-11-17 01:32:31Z

6

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'   
}

edited Nov 17, 2016 at 1:32

Andrew Laino

273 bronze badges

answered Jul 23, 2014 at 11:27

Luca Davanzo

21.6k15 gold badges124 silver badges152 bronze badges

1 Comment

matt wilkie Over a year ago

+1 for showing how the async call results in undefined. That's the pattern I was using and not understanding why undefined results.

V31 · Accepted Answer · 2014-07-23 11:22:23Z

4

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
});

answered Jul 23, 2014 at 11:22

V31

7,6643 gold badges28 silver badges44 bronze badges

Comments

Jagadeesh · Accepted Answer · 2014-07-23 11:33:31Z

1

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

answered Jul 23, 2014 at 11:33

Jagadeesh

5703 silver badges11 bronze badges

Collectives™ on Stack Overflow

JavaScript get data from json to a global variable

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related