Вложенные циклы - Цикл через открытый API погоды и классы в html - PullRequest
Новая
       5

Вложенные циклы - Цикл через открытый API погоды и классы в html

1 голос
/ 25 мая 2020

Я добавляю элемент погоды на веб-страницу с помощью OpenWeatherMap API. Я настроил его для соответствующего местоположения и был протестирован.

У меня есть 5 div для 5-дневного прогноза с h6 для имени дня в каждом (с использованием имени класса .weather-day). API предоставляет три объекта в день с соответствующей датой, температурой, влажностью и т. Д. c.

У меня есть для l oop, который будет l oop через каждый элемент с имя класса .weather-day и установите внутренний HTML. Когда я пытаюсь выполнить второй от l oop до l oop через объект погоды, все элементы имеют один и тот же заголовок. 

const link = "http://api.openweathermap.org/data/2.5/forecast?lat=" + lat + "&lon=" + lon + "&appid=" + API_KEY;
let request = new XMLHttpRequest();
request.open('GET', link, true);
request.onload = function() {
  let obj = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {

    // DEFINE DAY DATA

    for (let i = 0; i < 5; i++) {
      for (let j = 0; j < 15; j += 3) {
        DOMWeatherDay[i].innerHTML = getDayName(obj.list[j].dt);
      }
    }


  } else {
    console.log("The city doesn't exist");
  }
}
request.send();

function getDayName(dt) {
  let date = new Date(dt*1000);
  let days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
  return days[date.getDay()];
}
<section class="weather">
      <div class="row">
        <div class="col-md-3">
          <h5>Current</h5>
          <p>weather</p>
        </div>
        <div class="col-md-2">
          <p class="current-icon">

          </p>
        </div>
        <div class="col-md-2">
          <p class="current-temp">

          </p>
          <p id="current-conditions">

          </p>
        </div>
        <div class="col-md-1">
          <h6 class="weather-day">Day</h6>
          <p class="weather-icon">
            icon
          </p>
          <p class="weather-hi">
            hi
          </p>
          <p class="weather-lo">
            lo
          </p>
        </div>
        <div class="col-md-1">
          <h6 class="weather-day">Day</h6>
          <p class="weather-icon">
            icon
          </p>
          <p class="weather-hi">
            hi
          </p>
          <p class="weather-lo">
            lo
          </p>
        </div>
        <div class="col-md-1">
          <h6 class="weather-day">Day</h6>
          <p class="weather-icon">
            icon
          </p>
          <p class="weather-hi">
            hi
          </p>
          <p class="weather-lo">
            lo
          </p>
        </div>
        <div class="col-md-1">
          <h6 class="weather-day">Day</h6>
          <p class="weather-icon">
            icon
          </p>[![Example of API object][1]][1]
          <p class="weather-hi">
            hi
          </p>
          <p class="weather-lo">
            lo
          </p>
        </div>
        <div class="col-md-1">
          <h6 class="weather-day">Day</h6>
          <p class="weather-icon">
            icon
          </p>
          <p class="weather-hi">
            hi
          </p>
          <p class="weather-lo">
            lo
          </p>
        </div>
      </div>
    </section>

функция getDayName конвертирует временную метку unix.

1 Ответ

0 голосов
/ 25 мая 2020

Установка содержимого с помощью innerHTML заменит текущее содержимое этого HTML элемента. Вместо этого вы можете использовать insertAdjacentHTML(), который поддерживает содержимое и позволяет указать, куда вставить новую разметку. MDN описание insertAdjacent HTML. 

DOMWeatherDay[i].insertAdjacentHTML('beforeend', getDayName(obj.list[j].dt));
...