Javascript

Question

我正在使用 openweathermap.org API，并使用 javascript 获取数据，然后 post 到 HTML。我有两个 javascript 函数。获取当前天气的一个功能非常有效——第二个功能是提取 5 天的天气预报。我已经到了可以提取数据的地步，但我需要遍历该数据并从 post 到 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>

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

编辑:

我需要遍历 API 调用的输出，并将 post 数据输入到上面显示的 HTML 中。

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

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 层次结构中更深。

Javascript - 遍历 API 调用 JSON 的结果，并在 HTML 中打印

Javascript - loop through results from API call to JSON, and print in HTML

json

function

loops

openweathermap