tengo un problema; Tengo el siguiente código de programa:
var xmlhttp = new XMLHttpRequest(); var url = "https://wjko5k6250.execute-api.us-east-2.amazonaws.com/motorcycle"; xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var allmot = JSON.parse(this.responseText); console.log(allmot); for(var i = 0, len = allmot.Items.length; i < len; i++) { id=allmot.Items[i].id var url1 = "https://wjko5k6250.execute-api.us-east-2.amazonaws.com/motorcycle/"+id; console.log(url1); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myArr = JSON.parse(this.responseText); console.log(myArr); document.getElementById("img").src = myArr.Item.image; document.getElementById("brd").innerHTML = myArr.Item.brand; } }; xmlhttp.open("GET", url1, true); xmlhttp.send(); } } }; xmlhttp.open("GET", url, true); xmlhttp.send(); allmot es el siguiente:
Items: Array (4) 0: {brand: 'Guzzi', id: '123456', image: 'moto_guzzi.jpg', date: '27/11/2021 '} 1: {brand: 'Bimota', id: '135623', image: 'bimota.jpg', date: '04/12/2021 '} 2: {brand: 'Ducati', id: '123789', image: 'b_desertx.jpg', date: ' 04/12/2021 '} 3: {brand: 'Benelli', id:' 146975 ', image:' benelli.jpg ', date: '27/11/2021'} url1 devuelve (según el bucle for):
https://wjko5k6250.execute-api.us-east-2.amazonaws.com/articles/123456 https://wjko5k6250.execute-api.us-east-2.amazonaws.com/articles/135623 https://wjko5k6250.execute-api.us-east-2.amazonaws.com/articles/123789 https://wjko5k6250.execute-api.us-east-2.amazonaws.com/articles/146975y hasta ahora todo parece estar bien.
El problema está en myArr ; Noté que solo devuelve la imagen y la marca del último elemento, por lo que el que tiene una identificación igual a 146975.
Por lo tanto, parece haber problemas con el ciclo for.
¿Puede alguien amablemente ayudarme? Gracias a todos.
Como primera corrección, no reciclaría el objeto XHR del bucle externo en el bucle interno.
Cuando dice xmlhttp.onreadystatechange = function() ... en el ciclo interno, el xmlhttp ya está en el readystate , obtenido en el ciclo externo.
Entonces, sin verificar más lo que está sucediendo, usaría dos objetos XHR (tal vez como outerXmlhttp e innerXmlhttp ). También recrearía el XHR interno para cada ciclo con:
var innerXmlhttp;en la parte superior del cierre exterior.
Luego, dentro del ciclo haz:
innerXmlhttp = new XMLHttpRequest();Esto se debe a la elevación variable. Si solo haces esto:
var innerXmlhttp = new XMLHttpRequest();dentro del ciclo puede obtener un comportamiento diferente. Simplemente no lo haga y escriba lo que quiere decir (eleve las variables y asígnelas donde realmente las necesite).
Si todo esto no es suficiente, haga una pregunta nueva y más precisa sobre lo que está pasando.
Este es su código con las correcciones:
var outerXmlhttp = new XMLHttpRequest(); var url = "https://wjko5k6250.execute-api.us-east-2.amazonaws.com/motorcycle"; outerXmlhttp.onreadystatechange = function() { var innerXmlhttp; if (this.readyState == 4 && this.status == 200) { var allmot = JSON.parse(this.responseText); console.log(allmot); for(var i = 0, len = allmot.Items.length; i < len; i++) { id=allmot.Items[i].id var url1 = "https://wjko5k6250.execute-api.us-east-2.amazonaws.com/motorcycle/"+id; console.log(url1); innerXmlhttp = new XMLHttpRequest(); innerXmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myArr = JSON.parse(this.responseText); console.log(myArr); document.getElementById("img").src = myArr.Item.image; document.getElementById("brd").innerHTML = myArr.Item.brand; } }; innerXmlhttp.open("GET", url1, true); innerXmlhttp.send(); } } }; outerXmlhttp.open("GET", url, true); outerXmlhttp.send();EDITAR: el ojo de águila de @Teemu
Como @Teemu señala en su comentario, si reasigna valores una y otra vez a los mismos objetos DOM como este:
document.getElementById("img").src = myArr.Item.image; document.getElementById("brd").innerHTML = myArr.Item.brand;claramente está sobrescribiendo cualquier valor que haya antes. En su lugar, debe crear y agregar esos objetos DOM, más como este:
var img = document.createElement("img"); img.src = myArr.Item.image; var brd = document.createElement("p"); brd.innerText = myArr.Item.brand; document.getElementById("motlist").append(img); document.getElementById("motlist").append(brd); Obviamente, necesitará un elemento <div id="motlist"></div> o algún otro padre en el DOM al que agregar los nuevos elementos.
Para la paginación, es posible que también desee borrar esos elementos de la lista... pero aquí nos estamos pasando de la raya.