Estoy tratando de recorrer algunos objetos. El código parece funcionar parcialmente, ya que puedo ver los datos que llenan la tarjeta, pero muestra solo el último objeto de los datos daily (que, por cierto, es un montón de objetos) 8 para ser precisos (que no estoy seguro de por qué, ya que hay 7 días a la semana) Leí en alguna parte que imprimir el último objeto es en realidad el comportamiento esperado.
Lo que no se es como solucionarlo.
¿Cómo muestro todos estos objetos?
function populateDailyData(data) { for (i = 0; i < data.daily.length; i++) { let daily = data.daily[i]; let dailyDescription = daily.weather[0].description; let dailyTempMin = daily.temp.min; let dailyTempMax = daily.temp.max; let dailyWeather = document.getElementById('daily-weather'); dailyWeather.innerHTML = ` <div class="card col-lg-2 col-6"> <div class="card-body"> <div class="description"> <h4 class="titleXS-regular tertiary">${dailyDescription}</h4> </div> <div class="flex horizontal details space8"> <h3 class="titleXS primary">${Math.round(dailyTempMin) + '°'}</h3> <h3 class="titleXS primary">${Math.round(dailyTempMax) + '°'}</h3> </div> </div> </div> `; } }necesitas concatenar tu html
function populateDailyData(data) { var dailyWeather = document.getElementById('daily-weather'); var html = ''; for (i = 0; i < data.daily.length; i++) { let daily = data.daily[i]; let dailyDescription = daily.weather[0].description; let dailyTempMin = daily.temp.min; let dailyTempMax = daily.temp.max; html += `<div class="card col-lg-2 col-6"> <div class="card-body"> <div class="description"> <h4 class="titleXS-regular tertiary">${dailyDescription}</h4> </div> <div class="flex horizontal details space8"> <h3 class="titleXS primary">${Math.round(dailyTempMin) + '°'}</h3> <h3 class="titleXS primary">${Math.round(dailyTempMax) + '°'}</h3> </div> </div> </div>`; } dailyWeather.innerHTML = html;}
map la matriz para compilar una nueva matriz de HTML basada en una cadena de plantilla, join y luego usar insertAdjacentHTML para agregarla a la página de inmediato.
const data = [{ name: 'Bobby Davro', age: 2 }, { name: 'Sue', age: 92 }, { name: 'Debbie', age: 25 }]; // `map` over the data to produce a new array // of HTML using template strings, then `join` // all the elements up into one HTML string const html = data.map(obj => { return ` <div> <span class="name">Name: ${obj.name}</span> <span class="age">Age: ${obj.age}</span> </div> `; }).join(''); const { body } = document; // Add it to the page body.insertAdjacentHTML('beforeend', html); .name { color: red; } .age { color: blue; }