access to a variable "outside" of a callback function in javascript

Question

loadJSON(path, callback) {
    console.log("path: " + path); 
    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', path, true);
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

Above is a function to access a json file locally. Then from `foobar()' parse the data retrieved. However from "outside" of call back function, the variable "json" cannot be accessed. I had searched similar SO questions and async concepts but still was not able to figure a way to resolve it.

function foobar() { 
    var json;
    loadJSON("data.json", function(response) {
        json = JSON.parse(response);
        console.log(json[0].name); // Successfully shows the result
    });
    console.log(json[0].name); // TypeError: json is undefined
}

Is there a way to access the variable "outside" of the callback?

http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call — Gerardo Furtado, Mar 08 '17 at 08:56
Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Andreas, Mar 08 '17 at 08:58
Checked both links and now I get a better understanding **why** it cannot be called 'outside' of the callback, Now I resolved my issue by implementing functions inside `loadJSON()` but I still don't get **how** I can access the variable outside of it. I want to know there is a workaround not why. — HUKS, Mar 09 '17 at 00:47

Jonathan Laurent · Accepted Answer · 2017-03-09T11:07:14.210

It's because it's set in Asynchronous mode.

console.log(json[0].name); // TypeError: json is undefined

This code is executed before json is filled. Therefore when you try to access it, it might be still empty. The third argument in this line defines it as Async:

xobj.open('GET', path, true);

You could try to put

xobj.open('GET', path, false);

But it isn't asynchronous anymore and the user will have to wait for the request to end, so it's probably better to make sure to use the 'json' var when the callback method has ben called and not before. Keeping the asynchrnous mode on. For this you'll need to restructure your code.

The link posted by Gerardo Furtado is totally accurate, you should check it.

Edit: As i already stated, and other users too, the async:false is not very good, so i'm editing my answer:

function foobar() { 
    var json;
    loadJSON("data.json", function(response) {
        json = JSON.parse(response);
        // Call another function with json that is now filled with data
        triggered(json);
    });
}

function triggered(json) {
    console.log(json[0].name);
    // Do your work on json
}

@HUKS `async:false` is almost always **not** the answer... You should really have a look at the "Possible duplicate:..." link to understand the core of the problem and how to solve it — Andreas, Mar 08 '17 at 10:06
The reason why I accepted this as the answer is that my goal is a script running on offline, using a browser just as UI, so I figured i didn't have to worry about the server response issue. I agree that this might not be an answer in most async cases. — HUKS, Mar 09 '17 at 01:01

Jacob · Answer 2 · 2022-04-14T00:14:09.953

This is an older question but it seems to be a common problem. Nowadays, we can use async/await and promises instead of separating our code into callbacks.

With a problem like this, we could just use the fetch API, but consider a scenario where you are using a third party API that uses callbacks instead of promises. You can't control the function, so how can you do this?

This is where promises and async/await come in. You can create a promise of the result and use it outside of the callback.

In OP's scenario, they are running their code in a foobar function. Here, all we need to do is make foobar an async function.

async function foobar() {
  const json = await new Promise((resolve) =>
    loadJSON("data.json", (response) => resolve(JSON.parse(response)))
  );

  console.log(json[0].name); // works!
}

This is especially useful when dealing with third party APIs. Say you have some API that uses callbacks:

XYZLibrary.api("/path/to/xyz", (error, response) => {
  if (error) return console.error(error);
  console.log(response);
});

You can convert the same code to use Promises.

async function main() {
  const response = await new Promise((resolve, reject) =>
    XYZLibrary.api("/path/to/xyz", (error, response) => {
      if (error) return reject(error);
      resolve(response);
    })
  );
  console.log(response);
}
main();

You can even make a wrapper:

async function apiWrapper(path) {
  return new Promise((resolve, reject) =>
    XYZLibrary.api(path, (error, response) => {
      if (error) return reject(error);
      resolve(response);
    })
  );
}
async function main() {
  const response = await apiWrapper("path/to/xyz");
  console.log(response);
}
main();

score 1 · Answer 3 · answered Mar 08 '17 at 08:58

1

It is very simple. Declare the json variable outside the function. This gives the variable a global scope. The function is called just to override json and the json can be used anywhere in the script

answered Mar 08 '17 at 08:58

Gowtham Shiva

3,802
2
11
27

access to a variable "outside" of a callback function in javascript

3 Answers3

Linked