Changing the variable name during a repeat loop in Javascript

Question

I want to make an indefinite number of ajax requests, according to the number of urls passed as parameter, I just need to know how to increment the (name) of the variable so that the answer does not overlap with the previous one.

Each request will fetch a different html content or json object and insert them into different elements of the document, without changing the variable all elements are incremented with the last loop response. Obs, putting the third argument 'false', in the open() method; right, but gives an alert in the console saying that it is not a good practice

[Deprecation] Synchronous Xmlhttprequest on the main thread is deprecated because of its detrimental effects to the end user’s Experience.

Example of what I’m looking for:

With each iteration I want the variable name to change:

var a = new XHtmlHTTPrequest();

In the next iteration:

var b = new XHtmlHTTPrequest();

Answer 1

Here’s an example with the Starwars API :)

The important ideas are:

• passes the element to be iterated to a new context/scope, so that variable is stored inside the function.

• chain ajax and function to be applied to elements passing the final function as callback to ajax to call. This function already takes saved the element as described above.

function ajax(url, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url);
  xhr.onload = function() {
    if (xhr.status === 200) {
      callback(JSON.parse(xhr.responseText));
    } else {
      alert('O ajax falhou! ' + xhr.status);
    }
  };
  xhr.send();
}

function adicionarNomeDepois(el) {
  var label = el.querySelector('label');
  label.innerHTML = 'A carregar...';
  return function(data) {
    label.innerHTML = data.name;
    el.querySelector('p').innerHTML = data.starship_class;
  }
}

var base = 'https://swapi.co/api/starships/';
var divs = document.querySelectorAll('[data-nrnave]');
for (var i = 0; i < divs.length; i++) {
  var el = divs[i];
  var url = base + el.dataset.nrnave;
  ajax(url, adicionarNomeDepois(el));
}

div {
  border: 1px solid #666;
  padding: 10px;
}

label {
  font-weight: bold;
}

<div data-nrnave="15">
  <label></label>
  <p></p>
</div>
<div data-nrnave="5">
  <label></label>
  <p></p>
</div>
<div data-nrnave="9">
  <label></label>
  <p></p>
</div>
<div data-nrnave="10">
  <label></label>
  <p></p>
</div>
<div data-nrnave="11">
  <label></label>
  <p></p>
</div>
<div data-nrnave="12">
  <label></label>
  <p></p>
</div>

Answer 2

Instead of changing the variable you could use a list, improving control over the code.

var a = [];
for (var i = 0; i < 4  ; i++) {
    var x = new XMLHttpRequest();
    a.push(x);
}

console.log(a);