Блог

В настоящее время я работаю над созданием своего первого приложения погоды на JS, используя API Openweathermap и ванильный javascript. Я пытаюсь настроить его таким образом, чтобы он предоставлял базовый прогноз на 5 дней, когда пользователь вводит свой город в поле поиска. API возвращает объект, содержащий массив, который содержит 5 объектов, соответствующих каждому дню (один такой объект включен в приведенный ниже код). Затем я хочу использовать эти данные, чтобы задать соответствующую информацию для отображения в HTML (пример одной из HTML-карточек также приведен ниже).

Как мне выполнить итерацию по этому массиву, чтобы применить правильные фрагменты данных к соответствующим элементам html? В частности, мне нужно получить текущую температуру, дату, описание погоды и влажность и применить их к соответствующему элементу html.

Один объект из массива данных

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

Обновленный код

 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>