I am trying to loop through some objects.
The code seems to work partially as I can see the data populating the card, but it displays only the last object from the daily data (which btw it's a bunch of objects) 8 to be precise (which I am not sure why since there are 7 days in a week)
I read somewhere that printing the last object is actually the expected behavior.
What I don't know is how to fix it.
How do I display all these objects?
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>
`;
}
}
you need to concat your 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;
}
I would map over the array to compile a new array of HTML based using a template string, join it together, and then use insertAdjacentHTML to add it to the page at once.
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; }