Is it possible to retrieve a value from an xhttp request?

Question

Is it possible to retrieve a value from an xhttp request?

I am currently working on an xhttp function that interacts with my database and returns an array. The content of the array varies based on the parameter provided in the xhttp function during its execution. Below is the code snippet for the xhttp function:

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

                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {                                                       
                    if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status == 200) {
                        console.log(this.responseText);
                        var rawdata = this.responseText;
                        var json = JSON.parse(rawdata); 
                        return json;
                    }
                };

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

In order to avoid repeating this function multiple times to fetch different arrays, I aim to streamline it for cleaner code in future instances. Here's a sample of what I envision doing:

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

Currently, the function returns an undefined value. What would be the correct approach to make this work effectively?

javascript xmlhttprequest vue.js

Answer 1

Answer №1

To ensure proper handling of your asynchronous code, you need to include a callback function and assign your variables within the callback:

retrieveGroupData: function (groupNumber, callback) {
            var instance = this;
            
            var httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = function() {                                                       
                if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status == 200) {
                    console.log(this.responseText);
                    
                    var rawData = this.responseText;
                    var jsonData = JSON.parse(rawData); 
                    return callback(jsonData);
                }
            };

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

To set the variables after calling retrieveGroupData, make sure to pass a callback function each time:

this.retrieveGroupData(1, function(result) {
  this.groupOneInfo = result;
});

Answer 2

To ensure proper handling of your asynchronous code, you need to include a callback function and assign your variables within the callback:

retrieveGroupData: function (groupNumber, callback) {
            var instance = this;
            
            var httpRequest = new XMLHttpRequest();
            httpRequest.onreadystatechange = function() {                                                       
                if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status == 200) {
                    console.log(this.responseText);
                    
                    var rawData = this.responseText;
                    var jsonData = JSON.parse(rawData); 
                    return callback(jsonData);
                }
            };

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

To set the variables after calling retrieveGroupData, make sure to pass a callback function each time:

this.retrieveGroupData(1, function(result) {
  this.groupOneInfo = result;
});

Is it possible to retrieve a value from an xhttp request?

Answer №1

Similar questions

Leveraging jQuery Ajax and MySQL to generate dynamic HTML content

Maintain only specific elements in jQuery by filtering out the rest

Excruciatingly tardy performance from Node, Apollo, and Sequelize (over 7 seconds)

Generating dynamic div elements using jQuery

Steps for recreating a Jquery Mobile form element with the same name after destroying it

Unable to interact with anchor link

Is it possible to dynamically add the URL to an iframe based on a condition being true, and then iterate through a list of URLs before

The height of my row decreases when I implement the z-index for a hover effect

Using jQuery to retrieve the nth child from a table after dynamically creating it with AJAX

issue encountered during the conversion from kml to geojson format

Tips for transferring JavaScript data to an ASP.NET MVC controller

Guide for accessing Javascript documentation via console?

The loading time for the NextJS production build is unacceptably sluggish

Overflow of text arranged horizontally within a span element situated inside a div container

Leveraging xgettext for extracting translatable content from VueJS files

finding the ID of the element that triggered a jQuery dialog

Obtain the title of the text generated by clicking the button using a script function

Guide on setting up background sound notifications with firebase-messaging-sw.js

Enhancing Function Calls for Better Performance in V8

Looking to execute a PHP file from HTML/JavaScript?