[XMLHttpRequest] Réception données dans désordre

Fermé
raphaelpeim Messages postés 2 Date d'inscription mercredi 8 avril 2020 Statut Membre Dernière intervention 28 avril 2020 - 28 avril 2020 à 20:41
Bonjour tout le monde,

Sur l'un de mes projets, je récupère des données via une API et l'objet XMLHttpRequest. Quand je fais mes requêtes HTTP sur Postman, les données sont toujours affichées dans le bon ordre comme indiqué dans l'API mais ce n'est pas le cas avec le code suivant :

let mealRequest = new XMLHttpRequest(),
    mealUrl = "http://localhost/IMT/Projet/app/api/meal/" + getCookie('IMMUserId');

// Food
mealRequest.open("POST", mealUrl);
mealRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
mealRequest.onreadystatechange = function() {
  if (this.readyState === XMLHttpRequest.DONE) {
    let mealResponse = JSON.parse(mealRequest.response);

    // Table
    mealResponse.results.forEach(meal => {
      let foodRequest = new XMLHttpRequest(),
          foodUrl = "http://localhost/IMT/Projet/app/api/food/" + meal.food;

      foodRequest.open('GET', foodUrl);
      foodRequest.onload = function() {
        let foodResponse = JSON.parse(foodRequest.response);
        
        let tr = document.createElement('tr');
        
        tableData.forEach(data => {
          let td = document.createElement('td');
          
          if (data == 'img') {
            let img = document.createElement('img');

            td.className = "foodImage";
            img.src = "img/food/" + foodResponse.results['name'] + ".png";

            td.appendChild(img);
          }
          else if (data == 'name')
            td.innerHTML = foodResponse.results[data];
          else if (data == 'date')
            td.innerHTML = meal[data].split('-').reverse().join("/");
            
          tr.appendChild(td);
        });

        tBody.appendChild(tr);
      }
      foodRequest.send(null);
    });
  }
}
mealRequest.send("firstRow=" + firstRow + "&rowsNumber=" + rowsNumber);


L'ordre d'affichage des données de foodRequest n'est pas toujours le même. J'imagine qu'il doit s'agir de fonctions synchrones ou asynchrones mais je ne vois pas comment m'assurer que les données soient bien affichées comme je le voudrais.

J'obtiens visuellement ça :





Si vous pouviez m'indiquer comment corriger mon problème, merci d'avance !