Возникли проблемы с отображением данных прогноза после очистки предыдущих данных

Question

Я пытаюсь отобразить 5-дневный прогноз, однако каждый раз, когда я очищаю данные из предыдущего прогноза, отображаются только данные за последний день 5-дневного прогноза. Я пытался поставить метод .empty() везде, но, похоже, ничего не работает.

$.ajax({
  url: queryURLThree,
   method: "GET"
 }).then(function (forecastResT) {

  for (var i = 0; i < forecastResT.list.length; i++) {
    if (forecastResT.list[i].dt_txt.indexOf("18:00:00") !== -1) {
      var day = forecastResT.list[i].dt_txt.split(" ")  
      var forecastNameS = $('<div class="col"><p>' + day[0] + '</p>')
      // add icon logos based on their weather conditions

     var imgOne = $("<img>").attr("src", "http://openweathermap.org/img/w/" + forecastResT.list[i].weather[0].icon + ".png");
     var tempFiveOne = $('<div id = "tempFive">'+ 'Temperature: ' +forecastResT.list[i].main.temp + '<div>');
     var humFiveOne = $('<div id = "humFive"> '+'Humidity: ' + forecastResT.list[i].main.humidity + '<div>');
     $('#fiveDay').empty();
     forecastNameS.append(imgOne);
     forecastNameS.append(tempFiveOne);
     forecastNameS.append(humFiveOne);
     ($('#fiveDay').append(forecastNameS));
  }
}

Может кто-нибудь помочь, пожалуйста?

Answer 1

Вы повторяете 5 новостных дней и каждый раз используете empty(). Это означает, что вы удалите предыдущий день, как только добавите следующий, и останется только последний.

Используйте empty() до вашего цикла:

$('#fiveDay').empty();
for (var i = 0; i < forecastResT.list.length; i++) {
  if (forecastResT.list[i].dt_txt.indexOf("18:00:00") !== -1) {
    var day = forecastResT.list[i].dt_txt.split(" ")  
    var forecastNameS = $('<div class="col"><p>' + day[0] + '</p>')
    // add icon logos based on their weather conditions

    var imgOne = $("<img>").attr("src", "http://openweathermap.org/img/w/" + forecastResT.list[i].weather[0].icon + ".png");
    var tempFiveOne = $('<div id = "tempFive">'+ 'Temperature: ' +forecastResT.list[i].main.temp + '<div>');
    var humFiveOne = $('<div id = "humFive"> '+'Humidity: ' + forecastResT.list[i].main.humidity + '<div>');

    forecastNameS.append(imgOne);
    forecastNameS.append(tempFiveOne);
    forecastNameS.append(
    $('#fiveDay').append(forecastNameS);
  }
}