使用 DOM 从 API 显示每小时天气

Question

我正在尝试通过此 API 在我的网站上显示每小时天气：https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/geotype/point/lon/18.1489/lat/57.3081/data.json

我很难理解这样做所需的功能。我想我需要某种循环，但不知道该放什么。到目前为止，这是我的代码：

export async function getWeather() {
    var res = await fetch("https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/geotype/point/lon/18.1489/lat/57.3081/data.json");
    if (res.ok)
      return await res.json();
    else
      alert('HTTP Error: ' + res.status);
  }

--My other file--

import {getWeather} from './fetch.js'

async function generate_weather() {

    var jsonRes = await getWeather();
    var i = 0;

    if(jsonRes.timeSeries[i].validTime == timeNow())
    {
        document.createTextNode(jsonRes.timeSeries[i].parameters[i].values[0] + " grader");
    }
        
}

function timeNow() {
    var date = new Date();
    var hours = date.getHours();
    
    return hours;
}

generate_weather();

我尝试了下面的示例，但没有成功。我错过了一步吗？

async function generate_weather() {

    var jsonRes = await getWeather();

    for (let times in jsonRes.timeSeries) {
        let currentTime = times.validTime;
        let date = new Date(currentTime);
        let currentHour = date.getHours();
        
        for (let param in times.parameters) {
            let value = param.values[0];
            let unit = param.unit;
        }
        

    for (var i = 0; i == currentHour;) {
        var newElement = document.createElement('h2');
        var newElementText = document.createTextNode(jsonRes.timeSeries[i].times[i].parameters[0]);

        newElement.appendChild(newElementText);

        document.getElementById("body").appendChild(newElement);
    }
}
}

generate_weather();

Answer 1

作为回应，您有两个数组，一个用于时间序列，另一个用于时间序列内的参数-

因此，您将不得不在 generate_weather 函数中像这样在循环内使用循环 -

for (let times in jsonRes.timeSeries) {
    let currentTime = times.validTime;
    let date = new Date(currentTime);
    let currentHour = date.getHours();
    
    for (let param in times.parameters) {
        let name = param.name;
        let value = param.values[0];
        let unit = param.unit;
        Console.log('Tempreture of ' + name + ' is ' + value + ' ' + unit); // Tempreture of t is 14.8 Cel
    }
}

以上代码将每小时显示每个名称的温度，如果您需要显示任何特定名称的温度，则可以使用 if/else 语句。