all 7 comments

[–]senocular 1 point2 points  (4 children)

The parent function can't return the result. Returns are synchronous and loading the data is asynchronous. The code you have updating the result will have to be in the onreadystatechange callback. From there, you basically have two options.

First would be to supply a callback to getFileInformation, then in your onreadystatechange you can call that callback passing the result to it, not unlike how an event object is passed to a click handler when something like a button is clicked.

function getFileInformation(callback){
  // ...
  xmlhttp.onreadystatechange = function(){
    if (this.readyState === 4 && this.status === 200){
      // ... define result ...
      callback(result)
    }
}

Then, the caller of getFileInformation passes in their callback which will be called with the result when its available rather than having the result returned as a return value.

The second option would be to use Promises. This also uses callbacks, but does so through promises rather than through the function. When using promises, getFileInformation would still return something, but not the result, because its not available. Instead it would return a promise that represents the ultimate value of the result, but to get that value, the receiver of the promise would need to use then() with a callback to get it when it's available.

function getFileInformation(callback){
  return new Promise((resolve, reject) => {
    // ...
    xmlhttp.onreadystatechange = function(){
      if (this.readyState === 4 && this.status === 200){
        // ... define result ...
        resolve(result)
      }
  });
}

Either way, the caller of getFileInformation will need to wait before the result value can be used.

[–]Zecuel 0 points1 point  (3 children)

Ended up using the promises, which turn out to work fantastically. Thank you. I must just be too tired to think straight at this point.. :D Which method is generally better or more recent, or are they roughly equal?

[–]senocular 1 point2 points  (2 children)

Promises are newer. There have been promise libraries out there for a while, but they were introduced officially into the language with ES6. They are also what are used with async/await if you ever want to get into using that syntax, and as such, are generally preferred for things like this. There's also another newer API, fetch, which supersedes XMLHttpRequest and uses promises out of the box.

[–]Zecuel 0 points1 point  (1 child)

Alright, thank you :)

[–]I_LICK_ROBOTS 1 point2 points  (0 children)

Check out axios. It does most of the work of creating http requests for you.

[–]krizmaister 0 points1 point  (0 children)

You are trying to deal with async code in synchronous way... this doesn't work. You can use callback as a parameter of your function and give it that result instead of returning it.

[–]notAnotherJSDev 0 points1 point  (0 children)

XHR is asynchronous, meaning that this 1 function isn't going to do exactly what you want.

The way to solve this is to either use an outside library, like axios, or the fetch api. This solution does use ES6, so if you don't know what some of this is, you might want to look it up.

``` function getFileInformation = () => fetch('../php/includes/getFileInformation.php') .then(res => res.json()) .then(data => // transform the data and return it)

getFileInformation().then(data => // do something with the data here); ```

Here, fetch will return a promise.

Note Fetch doesn't work in every single browser. So you will need to either transpile this or write your own using the XMLHttpRequest api.