How can one use the value returned from a nested function within a method, in another method?

Question

I am having a constructor function, which in the end should return a couple of methods. Currently I struggle to understand how I can use the value from the

var info = JSON.parse(xhr.responseText);

in the method, called getNames. It works if I combine the two methods to one, so the code itself works, only problem is to pass the variable.

function TestConstructor(url) {
  var newObject = {};
  this.newObject = newObject;

First method in the constructor function:

  newObject.load = function () {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://notarealurl.com/104857.json");
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var info = JSON.parse(xhr.responseText);
        return info;
      }
     };
     xhr.send();
   };

Second method in the constructor function:

 newObject.getNames = function (info) {
   var kommuner = info.elements;
   var result = [];
   for (i = 0; i < Object.keys(kommuner).length; i++) {
      result.push(Object.keys(kommuner)[i]);
      }
   return result;
 };

return newObject;
}

When I try to

console.log(newObject.getNames(info)); 

I receive error message

Uncaught TypeError: Cannot read property 'elements' of undefined
at Object.TestConstructor.newObject.getNames 

Sorry if similar question has been asked earlier, I have looked at a few without understanding how it solves my problem. I have also tried to look at the callback function, but I struggle to understand how it works in my case. Any help appreciated, thanks :)

Answer 1

I think, the behavior you are looking for is to store the "info" in a variable local to your constructed object, and access that variable from the second method. So, why not put a var info = null; in your constructor. Then, after parsing the data, assign it to that variable (i.e. remove the var). And, instead of expecting an argument info, you can just use that local variable.

function TestConstructor(url) {
  var newObject = {};
  var info; // <-- local variable available to both functions.
  this.newObject = newObject;

  newObject.load = function () {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "http://notarealurl.com/104857.json");
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        info = JSON.parse(xhr.responseText); // <-- assign result to local variable
      }
    };
    xhr.send();
  };

  newObject.getNames = function() { // <-- no argument here
    var kommuner = info.elements; // <-- instead, use local variable
    var result = [];
    for (i = 0; i < Object.keys(kommuner).length; i++) {
      result.push(Object.keys(kommuner)[i]);
    }
    return result;
  };

  return newObject;
}

This is, however, not a very clean solution. Instead, as CertainPerformance suggested, you should use the Promise pattern to provide your data asynchronously, since you currently don't know, when your load call has actually completed. Therefore, info may not even be initialized, when you call getNames.

A promise based solution could look like this:

    function TestConstructor() {
      var newObject = {},
          info;

      newObject.load = function () {
        var p = new Promise(function(resolve, reject) {
          var xhr = new XMLHttpRequest();
          xhr.open("GET", "http://notarealurl.com/104857.json");
          xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
              if (xhr.status === 200) { // <-- call succeeded, parse result
                info = JSON.parse(xhr.responseText); // <-- assign result to local variable
                resolve(info); // <-- resolve promise with the result
              } else {
                reject(); // <-- call failed, reject the promise
              }
            }
          };
          xhr.send();
        });
        return p;
      };

      newObject.getNames = function() { // <-- no argument here
        var kommuner = info.elements; // <-- instead, use local variable
        var result = [];
        for (i = 0; i < Object.keys(kommuner).length; i++) {
          result.push(Object.keys(kommuner)[i]);
        }
        return result;
      };

      return newObject;
    }

    var myObj = new TestConstructor('');
    myObj.load().then(function() {
      var names = myObj.getNames();
      // do something with the result.
      console.log(names);
    }).catch(function() {
      // handle error graciously.
      console.warn('Failed');
    });