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

Question

我正在尝试创建一个每日天气应用程序，但我在尝试弄清楚如何将所有 7 天的数据输出到卡片中时遇到问题。它目前只输出最后一天。我知道这是因为如果我将它设置为 $("#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 循环 会用最新的 ${iteration} 数据覆盖 html，而不是创建新的一块数据和一个新的 html 元素。要解决此问题：

您可以使用该线程中其他评论中的 $("#card_days").append 方法，但我个人在类似情况下使用过：
$("#card_days").insertAdjacentHTML('beforeend', html) 方法，它会插入你给它的代码作为 html 参数在您选择的元素的结束标记之前。

附带说明一下，我只使用了 insertAdjacentHTML，因为我需要用户能够创建和删除这些 html 元素，因此无法预定义它们的数量。在您的情况下，您似乎知道您正好需要 7 个元素。如果是这种情况，我建议坚持使用 html 和 css，并且 JS 的唯一用途是用新获取的数据更新占位符文本。在这种情况下，硬编码似乎更不易出错 :)

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

How do I iterate an output data from an array in an object

javascript

jquery

html

css

webpage