raphaelpeim
Messages postés2Date d'inscriptionmercredi 8 avril 2020StatutMembreDernière intervention28 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.