Javascript variable scope for json parse

Question

I'm using the code from http://www.kryptonite-dove.com/blog/load-json-file-locally-using-pure-javascript to read a json file and store it as a variable.

The code works fine; my json objects prints to the console successfully. However, I wish to access the variable outside the function. I moved the definition outside, but that does not work. What am I doing wrong?

function loadJSON(callback) {   
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.json', true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 && xobj.status == "200") {
        // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
        callback(xobj.responseText);
      }
  };
  xobj.send(null);  
}


var actual_JSON; <--- I moved the definition outside here 
function init() {
  loadJSON(function(response) {
  // Parse JSON string into object
    actual_JSON = JSON.parse(response);  
    console.log(actual_JSON); ---> this works
 });
}
init();
console.log(actual_JSON);     ----> this doesn't work; I get the var is undefined

loadJSON is async, the console log on the last line runs before load completes. — georg
– georg, Commented Jan 26, 2015 at 4:40
@Steve whoops, sorry, I forgot to add the call in. fixing now — pomegranate
– pomegranate, Commented Jan 26, 2015 at 4:42
@georg any suggestions for how can I ensure I can always access whatever is in actual_JSON then? — pomegranate
– pomegranate, Commented Jan 26, 2015 at 4:44
@pomegranate: you can only access it in the load callback, or functions you're calling from there. Thus, it doesn't make sense to make it global. See stackoverflow.com/questions/14220321/… for more details and explanations. — georg
– georg, Commented Jan 26, 2015 at 4:46
You can't treat an asynchronous result like synchronous code. You have to write code that works asynchronously by processing the result inside the completion function or using callbacks to call some other function. See this answer for a description of your options: stackoverflow.com/questions/14220321/…. The async completion happens sometime LATER which means code right after your function runs BEFORE the result is available. — jfriend00
– jfriend00, Commented Jan 26, 2015 at 4:50

surajck · Accepted Answer · 2015-01-26 05:10:33Z

1

loadJSON makes a GET request. The callback function that you are sending to it, gets executed when the response comes back, i.e when the JSON is fetched.

init();
console.log(actual_JSON);

So, init() gets called and it internally does a GET request, and since this is async it does not block the execution of the rest of the code. So the next line console.log(actual_JSON) get executed, at this point the value of actual_JSON is not modified.

You can do something like this to make it a little more clear:

function init() {
    loadJSON(function(response) {
        actual_JSON = JSON.parse(response);  
        consumeData(actual_JSON); //call another function with the actual JSON
    });
}

function consumeData(actualJson) {
    //write the rest of the code here
}

answered Jan 26, 2015 at 5:10

surajck

1,1759 silver badges24 bronze badges

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

Comments

vol7ron · Accepted Answer · 2015-01-26 05:03:14Z

Look inside your loadJSON you see it takes a function as a callback. This is done because a HTTP request is being sent off asynchronously and it's up to the server and network to determine how long it takes to run, meanwhile the rest of JavaScript on your page continues to execute (e.g., your final console.log) before the variable is set.

When the HTTP request is finished (the onreadystatechange bit), it'll run the function you passed in to loadJSON — that's the function where you're setting the variable and your console.log that works.

You how a few options:

Run your Ajax synchronously so it doesn't execute the rest of the JS (bad idea)

Add a callback to what you're doing:

var actual_JSON; <--- I moved the definition outside here 
function init() {
  loadJSON(function(response) {
  // Parse JSON string into object
    actual_JSON = JSON.parse(response);
    exec_after_init();
 });

}

init();

function exec_after_init {
   console.log(actual_JSON);
}

Note: code above has not been tested

Collectives™ on Stack Overflow

Javascript variable scope for json parse

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related