如何从一个数组中的对象迭代的输出数据

Question

我想创建一个每天的天气应用程序，我有问题想弄清楚如何将数据输出到卡的所有七天。它目前只输出的最后一天。我知道它，因为如果我将它设置为$("#card__days").html(但林不知道如何添加到当前的HTML。

有没有还输出任何更简单的方式这些信息？我觉得像我一样的方式太多了一项简单的任务。谢谢

    function updateDaily(data) {
        Object.keys(data.daily.data).forEach(function (i) {
            // call to find what the day is.
            let date = calculateDay(data.daily.data[i].time);

            console.log(data.daily.data[i]);
            let iteration = i;
            let high = data.daily.data[i].temperatureHigh;
            let low = data.daily.data[i].temperatureLow;

            let feels = data.daily.data[i].apparentTemperature;
            let desc = data.daily.data[i].summary;
            let icon = data.daily.data[i].icon;
            let skycons = new Skycons({ color: "#3e606f" });

            $("#card__days").html(`
            <div class="card__daily">
                <h2 id="daily__date"${iteration}">${date}</h2>
                <canvas src="" alt="icon" class="icon" id="daily__icon${iteration}"></canvas>
                <div class="degrees">
                    <h3 id="daily__high${iteration}" class="temp">${high}&#8457; / ${low}&#8457;</h3>
                </div>

                <h3 id="daily__desc${iteration}">${desc}</h3>
            </div>
            `);
            skycons.add(
                document.getElementById("daily__icon" + i),
                icon
            );
            skycons.play();


        });
    }

编辑：这是它目前的样子，并从API的一些数据。

Current Visual Output

Some data from Object

Answer 1

如果你想所有的七张牌的出现，使用.append()代替：

$("#card_days").append(/* Your card HTML */);

Answer 2

你只看到了最后一张牌，因为在每个迭代的for循环覆盖，而不是创建一个新的数据块和一个新的HTML元素与最新的$ {}重复数据的HTML。为了解决这个问题：

• 您可以使用$（“＃card_days”）追加方法，从这个线程的其他评论，但个人在我使用了类似的情况：
• $（“＃card_days”）。insertAdjacentHTML（“beforeend”，HTML）方法，它会插入你给它只是你选择的元素的结束标记之前的HTML参数的代码。

作为一个方面说明，我只用insertAdjacentHTML因为我需要用户能够创建和删除这些HTML元素，因此其量不能被预先定义。根据你的情况，好像你知道你到底需要7元。如果是这样的话，我会建议坚持使用HTML和CSS，和JS的唯一用途是更新与新获取的数据的占位符文本。在这种情况下，硬编码，似乎有点多防错:)