Мои 3 часовые данные прогноза не отражаются на моем HD, показали все способные прогноза ⇐ Javascript

[Anonymous]

Я нахожусь в своем первом проекте JavaScript, и я строю приложение погоды. Как только 21:00 данных в моем HTML, но остальные не отражаются. Он должен был показать все способные данные прогноза. Способ создания оставшегося HTML. Я призван добавить его в прогнозируемый контейнер.innerhtml += прогноз. Я еще не делал этого, потому что только 1 из 6 я уже показал данные прогноза. Я хочу, чтобы 3-часовые данные прогноза могли автоматически отражать в HTML на каждые 24 часа < /p>
async function getForecast() {
try {

// const citySearch = document.getElementById('search-city').value;
const apiKey = 'APIKEY';
const forecastFullUrl = `https://api.openweathermap.org/data/2.5 ... its=metric`;

console.log('fetching forecast URL:', forecastFullUrl)
const forecastResponse = await fetch(forecastFullUrl)
const forecastData = await forecastResponse.json()
console.log(forecastData);

displayCurrentForecastData(forecastData.list);
} catch (error) {
console.error('error fetching hourly forecast data:', error);
alert('Failed to fetch hourly forecast data');
}
}
getForecast();

function displayCurrentForecastData(forecastList) {

// compare today date with the date in the dorecast data and return only the ones that matches today's date

const currentDate = new Date();
const currentDateStringToShowOnMainPage = currentDate.toISOString().split('T')[0];
// to make the date on the main page be the current date
document.getElementById('current-date').textContent = currentDateStringToShowOnMainPage;

// to only shown current day's weather forecast
const currentDayForecast = forecastList.filter((forecast) => {

const time = new Date(forecast.dt * 1000)
const forecastDateString = time.toISOString().split('T')[0];
return forecastDateString === currentDateStringToShowOnMainPage;
})

// this to make more html children since i only created 6 spaces in th e html for the 3 hours weather details
const forecastContainer = document.getElementById('selected-hour-details')
// forecastContainer.innerHTML = '';

currentDayForecast.forEach((forecast, index) => {

const forecastItem = document.createElement('div');
forecastItem.className = 'selected-hour-details';
const time = new Date(forecast.dt * 1000)
const timeString = time.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit"
});

const temp = forecast.main.temp;
const description = forecast.weather[0].description;
const icon = `http://openweathermap.org/img/wn/${fore ... er[0].icon}`;

// to update the 3 hourly html with the forecast details

document.querySelector('.forecasttime').textContent = timeString;
document.querySelector('.forecasttemp').textContent = `${temp}°C: ${description}`;
document.querySelector('.weather-icon').src = icon;

// /create more spaces

forecastItem.innerHTML = `
${timeString}

${temp}°C: ${description}
`
forecastContainer.innerHTML += forecastItem;
})
}
< /code>



00:00

4°

01:00

5•

02:00

5•

03:00

5•

04:00

5•

05:00

5•




Подробнее здесь: https://stackoverflow.com/questions/794 ... e-able-for