CODEWITHSUNDEEP
javascriptcallbackxmlhttprequest
HUKS
HUKS

Reputation: 319

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

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?

Upvotes: 8

Views: 25665

Answers (3)

Jacob
Jacob

Reputation: 1835

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

Upvotes: 3

Jonathan Laurent
Jonathan Laurent

Reputation: 106

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
}

Upvotes: 9

Gowtham Shiva
Gowtham Shiva

Reputation: 3875

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

Upvotes: 1

Related Questions