Javascript - 循环从 API 调用到 JSON 的结果，并以 HTML 格式打印

Question

我正在使用 openweathermap.org API，并且正在使用 javascript 来获取数据，然后发布到 HTML。我有两个 javascript 函数。获取当前天气的一个功能非常有效 - 第二个功能是拉 5 天预报。我已经到了可以提取数据的地步，但是我需要遍历该数据并发布到 HTML。函数如下：

function getForecast() {
    let forecast_icon = document.getElementById("forecast_icon");
    let forecast_temperature = document.getElementById("forecast_temperature");

    let api = "https://api.openweathermap.org/data/2.5/weather";
    let apiKey = "API KEY";

    location.innerHTML = "Locating...";

    navigator.geolocation.getCurrentPosition(success, error);

    function success(position) {
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;

        let url = api + "?lat=" + latitude + "&lon=" + longitude + "&appid=" + apiKey + "&units=imperial";

        fetch(url)
            .then(response => response.json())
            .then(forecast => {
                console.log(forecast);

                let temp = forecast.main.temp;
                forecast_temperature.innerHTML = Math.round(temp) + "°F";
                let icon = forecast.weather[0].icon;
                forecast_icon.innerHTML = '<img src="http://openweathermap.org/img/wn/' + icon + ".png" + '"/>';
            });
    }

    function error() {
        location.innerHTML = "Unable to retrieve your location";
    }
}

getForecast();

这是 HTML - 非常简单：

<ul>
  <li>
    <div id='forecast_icon'></div>
    <div class='temperature-sensor-day' id='forecast_temperature'></div>
  </li>
</ul>

我不确定如何遍历数据并将每个结果发布到 HTML。我会继续搜索，但希望得到一些指导。

编辑：

我需要遍历 API 调用的输出并将该数据发布到上面显示的 HTML 中。

我尝试使用“承诺”。我在搜索中看到了这个：

for (url in urls){
    time = getData(urls[url])
    console.log(time)
    ttTimes.push(time)
};

我尝试替换我的值，但由于这个使用了两个 url，我无法弄清楚如何让它工作。

我还看到了不同类型的循环，所以我对最好的方法感到困惑。

下面是它的外观图片。您可以看到五天中只有一天在填充。希望这有助于可视化问题。

Answer 1

你就在那里。您要查找的数据位于 API 响应 documented here 的 list 数组中。您只需遍历 list 数组，为您希望显示的每个数据创建 HTML 元素，并在执行过程中附加到 DOM。

请注意，我正在动态制作 HTML 元素以将数据插入其中，因此您不需要 HTML 文档中的当前元素。

fetch(url)
    .then(response => response.json())
    .then(forecast => {

        // For each day, we'll loop through and add it to the DOM:
        forecast.list.forEach(day => {

            // Create a new element to hold each day's data in the DOM:
            const dayContainer = document.createElement('div')

            // Create an element to hold the temp data:
            const temp = day.main.temp;
            const tempElem = document.createElement('div')
            tempElem.innerText = Math.round(temp) + '°F'
            dayContainer.appendChild(tempElem)

            // Create an image element to hold the icon:
            const icon = day.weather[0].icon;
            const iconElem = document.createElement('img')
            iconElem.src = 'http://openweathermap.org/img/wn/' + icon + '.png'
            dayContainer.appendChild(iconElem)

            // Add the result to the DOM:
            document.body.appendChild(dayContainer)
        })
    })

请注意，最后我将附加到document.body。您可能想要附加到不同的元素，在 DOM 的层次结构中更深。