How do I assign data from a weather api object to individual html elements using javascript?

Question

I'm currently working on building out my first JS weather app, using the Openweathermap API and vanilla javascript. 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. 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). 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).

How do I iterate over this array to apply the correct pieces of data to their corresponding html elements? Specifically I need to grab the current temp, the date, the weather description, and the humidity and apply it to the respective html element.

One object from array of data

 [
  {
    "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

   <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

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>