Estoy usando la API MET para mostrar la información de cada obra de arte en un departamento específico. Para hacer esto, estoy tratando de recorrer una matriz, first10 , usando forEach . Cuando miro en console.log, puedo ver cada objs en first10 , pero una vez que llega a object.onload , solo obtengo la "tarjeta" de los últimos objs en la matriz.
Este es el HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body id="home"> <main id="results-container"></main> <script src="js/script.js" type="text/javascript"></script> </body> </html>Este es el JavaScript:
let resultsBody = document.getElementById('results-container'); objects.open('GET', `https://collectionapi.metmuseum.org/public/collection/v1/objects?departmentIds=6`, true); objects.onload = function() { let data2 = JSON.parse(this.response); if (objects.status >= 200 && objects.status < 400) { let first10 = data2.objectIDs.slice(0, 4); intr = 0; first10.forEach(objs => { object.open('GET', `https://collectionapi.metmuseum.org/public/collection/v1/objects/${objs}`, true); object.onload = function() { let data3 = JSON.parse(this.response); if (object.status >= 200 && object.status < 400) { const card = document.createElement('div'); card.setAttribute('class', 'card'); const images = document.createElement('div'); images.innerHTML = `<img src="${data3['primaryImageSmall']}">`; const h1 = document.createElement('h1'); h1.style.color = "black"; h1.textContent = data3['title']; const p = document.createElement('p'); p.style.color = "black"; p.textContent = data3['artistDisplayName']; resultsBody.appendChild(card); card.appendChild(images); card.appendChild(h1); card.appendChild(p); // } } } object.send(); }); } } objects.send(); He estado tratando de averiguar cómo hacer una "tarjeta" con la información de cada objs . Estuve mirando otras preguntas relacionadas con la mía, pero realmente no entendía cómo se aplica a mi problema ya que todavía estoy comenzando con JavaScript.
Creo que deberías declarar new XMLHttpRequest(); en cada iteración forEach:
first10.forEach(objs => { /*HERE*/ let object = new XMLHttpRequest(); object.open('GET', `https://collectionapi.metmuseum.org/public/collection/v1/objects/${objs}`, true);de lo contrario, está reasignando las nuevas llamadas para el mismo objeto para obtener solo la última.