JavaScript for loop innerHTML

Question

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>
        `;
    }
}

If you're using template strings, there's no need for the `+`. Use `)}°<` instead of `) + '°'}<` — evolutionxbox, Mar 11 '22 at 12:50
You're resetting the HTML on every iteration. By the end of the loop the HTML will only be the data from the last object. — Andy, Mar 11 '22 at 12:50
@sojin: [re `innerHTML` concatentation](https://stackoverflow.com/questions/11515383/why-is-element-innerhtml-bad-code) — Andy, Mar 11 '22 at 12:52
@Andy I know, I mentioned on my comment, that is what I need to understand, how to fix that — 200gSoft, Mar 11 '22 at 12:52
@Andy Yes that's right i was just trying to share the quick solution. the best method is read the document before loop and prepare string HTML inside loop and append it after loop. right ? — sojin, Mar 11 '22 at 12:54

Md Ashikul Islam · Answer 1 · 2022-03-11T13:07:39.117

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;

}

This doesn't achieve what I need, all it does is repeting the last object out of 8 — 200gSoft, Mar 11 '22 at 13:01
@200gSoft Then your code would achieve the same, were it working. — connexo, Mar 11 '22 at 13:18

Andy · Answer 2 · 2022-03-11T13:16:30.797

0

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; }

edited Mar 11 '22 at 13:16

answered Mar 11 '22 at 12:58

Andy

61,948
13
68
95

How come @connexo? That would make sense if I was using `createElement` but I'm not. – Andy Mar 11 '22 at 13:15
You are right, my bad. – connexo Mar 11 '22 at 13:16
1

Not really sporting to single handedly reopen a closed duplicate and then answer it... – Heretic Monkey Mar 11 '22 at 23:24
Those answers were years old @HereticMonkey. We can do better. And I answered the question, and then reopened it, because the OP was using template strings, not requiring `createFragment`, and it seemed justified. – Andy Mar 12 '22 at 00:28

score 0 · Answer 3 · answered Jan 24 '23 at 11:28

0

Put the HTML element outside the for loop.

html = '<ul>'
//start loop
for (i = 0; i < data.daily.length; i++) {
html += '<li>' + obj.name + '</li>'
html += '<li>' + obj.age + '</li>'
} //end loop
html += '</ul>'

answered Jan 24 '23 at 11:28

user1903663

1,713
2
22
44

JavaScript for loop innerHTML

3 Answers3