JavaScript for loop innerHTML-CodePudding

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 >
            <div >
                <div >
                    <h4 >${dailyDescription}</h4>
                </div>
                <div >
                    <h3 >${Math.round(dailyTempMin)   '°'}</h3>
                    <h3 >${Math.round(dailyTempMax)   '°'}</h3>
                </div>
            </div>
        </div>
        `;
    }
}

CodePudding user response：

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 >
            <div >
                <div >
                    <h4 >${dailyDescription}</h4>
                </div>
                <div >
                    <h3 >${Math.round(dailyTempMin)   '°'}</h3>
                    <h3 >${Math.round(dailyTempMax)   '°'}</h3>
                </div>
            </div>
        </div>`;
}
dailyWeather.innerHTML = html;

}

CodePudding user response：

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 >Name: ${obj.name}</span>
      <span >Age: ${obj.age}</span>
    </div>
  `;
}).join('');

const { body } = document;

// Add it to the page
body.insertAdjacentHTML('beforeend', html);

.name { color: red; }
.age { color: blue; }