Question

49

How to use multiple XMLHttpRequest?

rated 0 times [ 56] [ 7] / answers: 1 / hits: 30160 / 7 Years ago, sat, september 30, 2017, 12:00:00

I need to get 8 JSON from 8 different URL. I stored the query string that I have to change in an Array and I loop through it with a for loop. Here 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();

}

So far I just want to display each JSON on the console. I don't get any error but I can display only the last JSON with the last index item (noobs2ninjas).

Could anybody explain me why? how do I get the all JSON that I need?

Thanks

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shawn

Add To Favorites

Follow

Total Points: 507

Total Questions: 103

Total Answers: 111

Location: American Samoa

Member since Fri, Aug 26, 2022

2 Years ago

answered 7 Years ago dustin · Accepted Answer

Could anybody explain me why? how do I get the all JSON that I need?

In order to send a second request you need to wait for the first to finish. Hence, if you are interested to get the responses in the array order you can loop on each array element and only when you get the response you can loop on the remaining elements:

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);

Instead, if you want to execute all the request completely asynchronous (in a concurrent way), the request variable must be declared and scoped inside the loop. One request for each array element. You have some possibilities like:

using let

declaring a callback

using IIFE

using 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();

}

As per @Wavesailor comment, in order to make a math computation at the end of 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, []);