如何使用 ZDE9B9ED78D7E2E19DCEEFFEE780E2 将天气 api object 中的数据分配给各个 html 元素？

Question

我目前正在使用 Openweathermap API 和 vanilla javascript 构建我的第一个 JS 天气应用程序。 我正在尝试对其进行设置，以便在用户将其城市输入搜索字段时提供基本的 5 天预测。 API 返回一个包含一个数组的 object，其中包含每天对应的 5 个对象（下面的代码中包含一个这样的 object）。 然后，我想使用该数据设置在 HTML 中显示的适当信息（下面还提供了 HTML 卡之一的示例）。

如何迭代此数组以将正确的数据应用于其相应的 html 元素？ 具体来说，我需要获取当前温度、日期、天气描述和湿度，并将其应用于相应的 html 元素。

来自数据数组的一个 object

 [
  {
    "dt": 1614632400,
    "main": {
      "temp": 56.64,
      "feels_like": 48.09,
      "temp_min": 56.64,
      "temp_max": 56.95,
      "pressure": 1025,
      "sea_level": 1025,
      "grnd_level": 953,
      "humidity": 12,
      "temp_kf": -0.17
    },
    "weather": [
      {
        "id": 800,
        "main": "Clear",
        "description": "clear sky",
        "icon": "01d"
      }
    ],
    "clouds": {
      "all": 1
    },
    "wind": {
      "speed": 4.36,
      "deg": 71
    },
    "visibility": 10000,
    "pop": 0,
    "sys": {
      "pod": "d"
    },
    "dt_txt": "2021-03-01 21:00:00"
  },
]

一张HTML卡

   <div class="forecast-card">
     <h2 class="date">Saturday</h2>
     <h2 class="current-temp">57</h2>
     <img src="./icons/unknown.png" alt="weather icons" class="icon">
     <p class="conditions">Clear Sky</p>
     <h3 class="high-temp">
      High
     </h3>
     <h3 class="low-temp">
      Low
     </h3>
     <p class="humidity">80%</p>
    </div>

Answer 1

更新代码

 const data = [ { "coord": { "lon": 100.5167, "lat": 13.75 }, "weather": [{ "id": 802, "main": "Clouds", "description": "scattered clouds", "icon": "03n" }], "base": "stations", "main": { "temp": 28.96, "feels_like": 34.79, "temp_min": 28, "temp_max": 30.56, "pressure": 1011, "humidity": 83 }, "visibility": 10000, "wind": { "speed": 1.54, "deg": 200 }, "clouds": { "all": 40 }, "dt": 1614633761, "sys": { "type": 1, "id": 9235, "country": "TH", "sunrise": 1614641637, "sunset": 1614684397 }, "timezone": 25200, "id": 1609350, "name": "Bangkok", "cod": 200 }, { "coord": { "lon": 150.7167, "lat": -30.75 }, "weather": [{ "id": 800, "main": "Clear", "description": "clear sky", "icon": "01d" }], "base": "stations", "main": { "temp": 18, "feels_like": 18.59, "temp_min": 18, "temp_max": 18, "pressure": 1011, "humidity": 94 }, "visibility": 10000, "wind": { "speed": 2.57, "deg": 150 }, "clouds": { "all": 0 }, "dt": 1614633937, "sys": { "type": 1, "id": 9604, "country": "AU", "sunrise": 1614628089, "sunset": 1614673852 }, "timezone": 39600, "id": 2158874, "name": "Manilla", "cod": 200 }, ]; let html = []; data.forEach(o => { html.push(` <div class="forecast-card"> <p class="date">Date: ${new Date()}</p> <p class="current-temp">Temp: ${o.main.temp} <sup>o</sup>C</p> <img src="./icons/${o.weather[0].icon}.png" alt="weather icons" class="icon"> <p class="conditions">Conditions: ${o.weather[0].description}</p> <p class="high-temp">High temp ${o.main.temp_max} <sup>o</sup>C</p> <p class="low-temp">Low temp: ${o.main.temp_min} <sup>o</sup>C</p> <p class="humidity">Humidity: ${o.main.humidity}%</p> </div> <hr />`); }); document.querySelector('.forecast-cards').innerHTML = html.join('');

 <div class="forecast-cards"></div>