[英]How do I assign data from a weather api object to individual html elements using javascript?
I'm currently working on building out my first JS weather app, using the Openweathermap API and vanilla javascript.我目前正在使用 Openweathermap API 和 vanilla javascript 构建我的第一个 JS 天气应用程序。 I'm attempting to set it up such that it provides a basic 5 day forecast when a user enters their city into the search field.我正在尝试对其进行设置,以便在用户将其城市输入搜索字段时提供基本的 5 天预测。 The API returns an object that contains an array, which contains 5 objects corresponding to each day (one such object included in the code below). API 返回一个包含一个数组的 object,其中包含每天对应的 5 个对象(下面的代码中包含一个这样的 object)。 I then want to use that data to set the appropriate information to display within the HTML (an example of one of the HTML cards is also provided below).然后,我想使用该数据设置在 HTML 中显示的适当信息(下面还提供了 HTML 卡之一的示例)。
How do I iterate over this array to apply the correct pieces of data to their corresponding html elements?如何迭代此数组以将正确的数据应用于其相应的 html 元素? Specifically I need to grab the current temp, the date, the weather description, and the humidity and apply it to the respective html element.具体来说,我需要获取当前温度、日期、天气描述和湿度,并将其应用于相应的 html 元素。
One object from array of data来自数据数组的一个 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"
},
]
One HTML card一张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>
Updated code更新代码
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.