multiple Get requests within function

Question

I'm new to js and I'm trying to perform multiple Get request within the same function

my code looks something like this:

...
...
...
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function(){
  if(this.readyState == 4 && this.status == 200){
    var response = JSON.parse(xhttp.responseText);
    ...
    ...
    for(var i=0; i<response.length,i++)
    {
      ...
      var xhttp1 = new XMLHttpRequest();
      xhttp1.onreadystatechange = function(){
      if(this.readyState == 4 && this.status == 200){
        var response1 = JSON.parse(xhttp1.responseText);
        ...
        ...
        ...
        }
        };
      xhttp1.open("GET","changedFileForTheInnerRequest",true);
      xhttp1.send();
      ...
      ...
    }
    ...
 }
};
xhttp.open("GET","fileForTheOuterRequest",true);
xhttp.send();

My problem: I know it might seem odd but that seems to be my only option.

I'm generating a second GET request within the main one, for some reason when the inner one ended the js code stopped and seemed to think that he reached his end. I'm new to html and js so maybe that's the way that request works..

In conclusion, I'm trying to get some different files in the second GET request which is in a for loop, when the names are changing based on the i index and information from the first file that was loaded in the first request..

The problem is that when the first loop ends it never loops again and stays stack at the end of the first inner get.
will be so happy if you could help me, give me an alternative or just explain more

thank you!

`var` variables are scoped to the function they are in. As such the `xhttp1` variable is going to be overlayed each time the loop processes and when you try to get the responseText it will be looking at a different request than which one finished. — Taplar, Aug 14 '18 at 20:17
Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Taplar, Aug 14 '18 at 20:19

score 0 · Accepted Answer · answered Aug 14 '18 at 20:18

When using the var keyword, the scope of the variable is bound to the closest function scope.

In this example

xhttp.onreadystatechange = function() {
      .... 
      ....
      for(var i=0; i<response.length,i++) {
            .....
            var xhttp1 = new XMLHttpRequest();

is the same as

xhttp.onreadystatechange = function() {
          var xhttp1;
          .... 
          ....
          for(var i=0; i<response.length,i++) {
                .....
                xhttp1 = new XMLHttpRequest();

xhhtp1 is available in the entire scope of the xhttp.onreadystatechange as that is the closest function scope. So technically for each iteration of the for loop you are over writing xhttp1 with a new XMLHttpRequest request.

In order to solve this issue you will have to wrap each corresponding request into its own function scope.

Option 2 - Use let instead of var that creates a block scope instead. ( Works in most of the latest browser versions but need to use a transpiler for older browsers. )

...
...
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    var response = JSON.parse(xhttp.responseText);
    ...
    ...
    for (var i = 0; i < response.length, i++) {
      sendRequest(response[i]);
    }
    ...
  }
};
xhttp.open("GET", "fileForTheOuterRequest", true);
xhttp.send();

function sendRequest(resp) {
  // resp is the response that corresponds 
  // to the outer request 
  var xhttp = new XMLHttpRequest();
  xhttp1.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = JSON.parse(xhttp1.responseText);
      ...
      ...
      ...
    }
  };
  xhttp1.open("GET", "changedFileForTheInnerRequest", true);
  xhttp1.send();
}

@ShirCohen. If this solved the issue, please accept the answer as this might help others looking for a possible solution. — Sushanth --, Aug 15 '18 at 17:53

multiple Get requests within function

1 Answers1