Top tips for utilizing numerous XMLHttpRequests efficiently

Question

Top tips for utilizing numerous XMLHttpRequests efficiently

I am attempting to retrieve 8 JSON objects from 8 different URLs. I have stored the query string that needs to be modified in an Array, and I am looping through it using a for loop. Below is my code:

var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

var request = new XMLHttpRequest();

for (var i = 0; i < index.length; i++) {

    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    request.open("GET", url);
    request.onload = function() {
        var data = JSON.parse(request.responseText);
        console.log(data);
    }
    request.send();
}

At this point, my goal is to simply display each JSON object on the console. However, I am only able to display the last JSON with the last index item (noobs2ninjas).

Can anyone explain why this is happening? How can I retrieve all the JSON objects that I need?

Thank you

javascript json ajax for-loop

Answer 1

Answer №1

Could someone please clarify why and how can I obtain all the necessary JSON data?

If you want to send a second request after the first one has finished, you must wait for the initial request to complete. To maintain the order of responses in an array, you can loop through each array element and proceed to the next element only after receiving a response:

var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var request = new XMLHttpRequest();
(function loop(i, length) {
    if (i>= length) {
        return;
    }
    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var data = JSON.parse(request.responseText);
            console.log('-->' + i + ' id: ' + data._id);
            loop(i + 1, length);
        }
    }
    request.send();
})(0, index.length);

If you prefer executing all requests asynchronously and concurrently, the request variable should be declared and scoped inside the loop, creating a separate request for each array element. You have several options like:

using let
defining a callback
utilizing IIFE
employing array .forEach() instead of a for loop

var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (var i = 0; i < index.length; i++) {

    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    let request = new XMLHttpRequest();
    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var data = JSON.parse(request.responseText);
            console.log('-->' + data._id);
        }
    }
    request.send();
}

In accordance with @Wavesailor's suggestion, if you need to perform a mathematical computation at the end of the calls:

var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var request = new XMLHttpRequest();
(function loop(i, length, resultArr) {
    if (i>= length) {
        console.log('Finished: ---->' + JSON.stringify(resultArr));
        return;
    }
    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var data = JSON.parse(request.responseText);
            console.log('-->' + i + ' id: ' + data._id);
            resultArr.push(data._id);
            loop(i + 1, length, resultArr);
        }
    }
    request.send();
})(0, index.length, []);

Answer 2

Could someone please clarify why and how can I obtain all the necessary JSON data?

If you want to send a second request after the first one has finished, you must wait for the initial request to complete. To maintain the order of responses in an array, you can loop through each array element and proceed to the next element only after receiving a response:

var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var request = new XMLHttpRequest();
(function loop(i, length) {
    if (i>= length) {
        return;
    }
    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var data = JSON.parse(request.responseText);
            console.log('-->' + i + ' id: ' + data._id);
            loop(i + 1, length);
        }
    }
    request.send();
})(0, index.length);

If you prefer executing all requests asynchronously and concurrently, the request variable should be declared and scoped inside the loop, creating a separate request for each array element. You have several options like:

using let
defining a callback
utilizing IIFE
employing array .forEach() instead of a for loop

var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (var i = 0; i < index.length; i++) {

    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    let request = new XMLHttpRequest();
    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var data = JSON.parse(request.responseText);
            console.log('-->' + data._id);
        }
    }
    request.send();
}

In accordance with @Wavesailor's suggestion, if you need to perform a mathematical computation at the end of the calls:

var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var request = new XMLHttpRequest();
(function loop(i, length, resultArr) {
    if (i>= length) {
        console.log('Finished: ---->' + JSON.stringify(resultArr));
        return;
    }
    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];

    request.open("GET", url);
    request.onreadystatechange = function() {
        if(request.readyState === XMLHttpRequest.DONE && request.status === 200) {
            var data = JSON.parse(request.responseText);
            console.log('-->' + i + ' id: ' + data._id);
            resultArr.push(data._id);
            loop(i + 1, length, resultArr);
        }
    }
    request.send();
})(0, index.length, []);

Answer 3

Answer №2

The issue arises when you initialize

var request = new XMLHttpRequest();

outside the for loop, resulting in only one request instance.

To rectify this, place it inside the for loop.

Keep in mind that ajax runs asynchronously, leading to results appearing in a non-sequential order.

The variable i's value should be declared with the let keyword for creating a block scope local variable.

let facilitates declaring variables limited in scope to the block.

let is commonly employed as a remedy for closures.

You can also utilize an array to store the XMLHttpRequest instances.

var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
requests=new Array(index.length);
for (let i = 0; i < index.length; i++) {
    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];
    requests[i] = new XMLHttpRequest();
    requests[i].open("GET", url);
    requests[i].onload = function() {
        var data = JSON.parse(requests[i].responseText);
        console.log(data);
    }
    requests[i].send();
}

Answer 4

The issue arises when you initialize

var request = new XMLHttpRequest();

outside the for loop, resulting in only one request instance.

To rectify this, place it inside the for loop.

Keep in mind that ajax runs asynchronously, leading to results appearing in a non-sequential order.

The variable i's value should be declared with the let keyword for creating a block scope local variable.

let facilitates declaring variables limited in scope to the block.

let is commonly employed as a remedy for closures.

You can also utilize an array to store the XMLHttpRequest instances.

var index = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
requests=new Array(index.length);
for (let i = 0; i < index.length; i++) {
    var url = "https://wind-bow.glitch.me/twitch-api/channels/" + index[i];
    requests[i] = new XMLHttpRequest();
    requests[i].open("GET", url);
    requests[i].onload = function() {
        var data = JSON.parse(requests[i].responseText);
        console.log(data);
    }
    requests[i].send();
}

Answer 5

Answer №3

If you're looking for an alternative to using XMLHttpRequest, consider trying out the Fetch API combined with Promise.all().

You can fetch data from multiple channels by providing an array of channel names like ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp"]. Then simply map over the array and use fetch() with the URL to each channel's data. Finally, utilize Promise.all() to handle multiple promises and extract the JSON data from each response.

.as-console-wrapper {
max-height: 100% !important;
}

Answer 6

If you're looking for an alternative to using XMLHttpRequest, consider trying out the Fetch API combined with Promise.all().

You can fetch data from multiple channels by providing an array of channel names like ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp"]. Then simply map over the array and use fetch() with the URL to each channel's data. Finally, utilize Promise.all() to handle multiple promises and extract the JSON data from each response.

.as-console-wrapper {
max-height: 100% !important;
}

Top tips for utilizing numerous XMLHttpRequests efficiently

Answer №1

Answer №2

Answer №3

Similar questions

Adjusting the mesh position in WebGL/Three.js

Having trouble correctly displaying an image from a JSON within a tableView cell

What is the purpose behind jade disregarding line breaks and spaces when rendering code?

What are the steps to incorporate npm into a Wix website editor?

Exploring a Discord.js collection: tips for accessing and manipulating objects within an array in the collection

Updating a property value within a JSON object: Adjusting attributes in a JSON data format

How can information be exchanged between PHP and JavaScript?

Leverage Reveal.js within Next.js by installing it as an npm package

Customize your payment with a PayPal button tailored to your desired price

What is the best way to prepare a DeserializationContext with custom domain objects for use in the deserialization process?

Determining if a user is already logged in from a different device using express-session

Is it possible to incorporate an HTML5 YouTube video without using an iframe tag

The animation is disrupted by multiple clicks in jQuery

Are there any other options besides using the React Material-UI makeStyles() function for styling class Components?

Is there a method to retrieve news image previews from bing-api news articles?

Clickability issue in Angular's ui-router: Non-responsive Links

What could be the reason for scope.$watch failing to function properly?

Deactivate debugging data for Tensorflow JS

The express-unless plugin in Node.js allows you to exclude specific paths from the middleware.auth

Using async/await to handle the callback function