Question

0

46

Vistas

JavaScript for loop innerHTML

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

7 months ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-03T13:21:38.618Z

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;

}

Answer 2 · 2022-07-03T13:21:38.626Z

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