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()：

success: function (data) {    
                $('#someDiv').html(data);
            }

Answer 2

您仅看到最后一张卡片，因为在每次迭代中，for循环都会使用最新的$ {iteration}数据覆盖 html，而不是创建新的数据和新的html元素。要解决此问题：

您可以在该线程的其他注释中使用$（“＃card_days”）。append方法，但就我个人而言，我使用的情况类似：
$（“＃card_days”）。insertAdjacentHTML（'beforeend'，html）方法，它会将您提供的代码作为html参数插入到您选择的元素的结束标记之前。

作为旁注，我仅使用insertAdjacentHTML，因为我需要用户能够创建和删除这些html元素，因此无法预定义它们的数量。在您的情况下，似乎您知道确实需要7个元素。如果是这种情况，我建议您坚持使用html和css，而JS的唯一用法是使用新获取的数据更新占位符文本。在这种情况下，硬编码似乎更加防错：）

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

2 个答案: