Can you return a value from a xhttp request?

Question

I have an xhttp function that calls my db and returns an array, the array is different depending on the parameter passed in the xhttp function when called. This is the xhttp function I have:

fetchGroupInfo: function (groupNum) {
                var global = this;

                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {                                                         //(callback function)this function runs after xhttp.open because we have asynchronous data sending so as soon as the data is recieved this is run
                    if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status == 200) {
                        console.log(this.responseText);
                        //I parse the rawdata received into jason structure then I pass it into and call the manipulate function
                        var rawdata = this.responseText;
                        var json = JSON.parse(rawdata); //parses the query result
                        return json;
                    }
                };

                xhttp.open("GET", "http://178.62.***.***:1020/groupInfo/"+groupNum, true);
                xhttp.send();
            },

Since I need to call the function 8 times on page load and get back 8 different arrays, I do not want to have to write out this function 8 times for each different array I need to get back. what I would like to be able to do later is something like this, so that I can keep my code clean:

this.group1Info = this.fetchGroupInfo(1);
this.group2Info = this.fetchGroupInfo(2);
this.group3Info = this.fetchGroupInfo(3);
this.group4Info = this.fetchGroupInfo(4);
.....

At the moment the way that the function is set up it is returning an undefined value, how would I make this work?

Answer 1

Your code is asynchronous, so you'll you to add a callback function and then set your variables in the callback:

fetchGroupInfo: function (groupNum, callback) {
            var global = this;

            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {                                                         //(callback function)this function runs after xhttp.open because we have asynchronous data sending so as soon as the data is recieved this is run
                if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status == 200) {
                    console.log(this.responseText);
                    //I parse the rawdata received into jason structure then I pass it into and call the manipulate function
                    var rawdata = this.responseText;
                    var json = JSON.parse(rawdata); //parses the query result
                    return callback(json);
                }
            };

            xhttp.open("GET", "http://178.62.***.***:1020/groupInfo/"+groupNum, true);
            xhttp.send();
        }

and now to set the variables, pass a callback each time you call fetchGroupInfo :

this.fetchGroupInfo(1, function(result) {
  this.group1Info = result;
});