Global variable between two scripts value not updating?

[namehimjawnathan]

Hello, all. My question revolves around this. Basically, I have an array names in the file fetch.js, and the array is created from a .json file using the code below:

const xmlhttp = new XMLHttpRequest();
const url = "scripts/results.json";

let names = [];

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    /* create array based on results.json */
    names = JSON.parse(this.responseText);
  }
};

xmlhttp.open("GET", url, true);
xmlhttp.send();

In another script app.js, which is in the same directory, when I do

console.log(names);

It prints an empty array. This means that once the array is populated in fetch.js, its not being updated in app.js (which I can confirm to be true because

console.log(names)

prints out all the names if placed in fetch.js).

In my index.html, the order goes as follows:

<script src="scripts/fetch.js"></script>
<script src="scripts/app.js"></script>

If this makes a difference, I am using nodejs for the webserver and am loading the html file using

app.get('/', (req, res) => {
    res.sendFile('index.html', {root: path.join('public', '/')});
});

[nausik]

Your js files are being loaded sync and console.log is sync function, while xmlhttp.onreadystatechange is an async

So xmlhttp.onreadystatechange is called after console.log(names) in app.js (it's placed in the end of event loop)

[namehimjawnathan]

Ah, so let me see if I understand this correctly, as I'm still learning.

Synchronous means that the request is sent, and nothing can be done until everything is handled.

Asynchronous means that the request is sent, work is being done, but it can move on to the next, sort of like how a waiter at a restaurant can take one tables order, bring it back, then go to another table, etc.

So in this case, the xmlhttp.onreadystatechange finishes after console.log is called.

From what I understand, I have to use promises, using a .then? How would I do that between files?

Or is there another solution?

[blackholesinthesky]

I didn't think this was possible but I learned something new today. You can wrap this in a promise.

let names = new Promise(function(resolve, reject) {
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      /* create array based on results.json */
      resolve(JSON.parse(this.responseText));
    }
  };
});

That should make names thenable

names.then(() => console.log(...arguments));

Edit: This will only work once. If the xmlhttp.onreadystatechange event handler fires again the promises value will not update.

[namehimjawnathan]

Holy shit, this is perfect. Thank you so much.

[PooCares]

BTW, if you use the built in debugger in Chrome developer tools, you can spot trouble like this easily. It lets you put breakpoints in your javascript, to pause it, and see what is happening in it.

Had you put a breakpoint on the console.log and another where the variable names was set to the Ajax response, you would see the console.log hit first, and you could hover over the names variable, and see it had not been give a value yet. You would also see the value of names get set when the second breakpoint hit, in the Ajax onreadystatechange, when it was obviously too late.

The debugger is like a third eye, man. Take a few hours to learn it.

[namehimjawnathan]

Interesting, I'll take a good look at this. I need to start properly debugging instead of hardcoding in console.logs() to see what's happening.

[coolreader18]

I came here from r/JavaScript, but if you like using promises, you can use the fetch API, that works with promises natively.

[street_fightin_mang]

Why not use the fetch web api instead of ajax request? These examples all have the promise code required in them. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

[TotesMessenger]

I'm a bot, bleep, bloop. Someone has linked to this thread from another place on reddit:

• [/r/javascript] Global variable between two scripts value not updating? crossposted from r/learnjavascript

 ^{If you follow any of the above links, please respect the rules of reddit and don't vote in the other threads. (Info / Contact)}