Блог

Итак, я создаю это приложение для веб-прогнозирования, используя OpenWeatherMap API, и пока я могу извлекать данные из первой итерации вывода списка, однако мне нужно получить данные и из других конкретных полей. Вот немного моего кода:

 ajaxGet("https://api.openweathermap.org/data/2.5/onecall?lat=4.6097amp;lon=-74.0817amp;exclude=current,minutely,hourly,alertsamp;appid=APPIDamp;units=metric", function (response) {

      var data = JSON.parse(response);
      console.log(data);
      
      var temperature = document.createElement("h6");
      temperature.textContent = data.daily[0].temp.max   "°"   " / "   data.daily[0].temp.min   "°";

      document.getElementById("temperaturaBogVier").appendChild(temperature);
  });
  

И вот пример того, как выглядит вывод API (я показываю здесь только первую итерацию, но всего их не менее 6, https://api.openweathermap.org/data/2.5/onecall?lat=4.6097amp;lon=-74.0817amp;exclude=current,minutely,hourly,alertsamp;appid=APPIDamp;units=metric):

 {"lat":4.61,"lon":-74.08,"timezone":"America/Bogota","timezone_offset":-18000,"daily":
[
    
{"dt":1600876800,
 "sunrise":1600857917,
 "sunset":1600901504,
 "temp":{"day":18.14,"min":8.99,"max":18.14,"night":12.08,"eve":15.45,"morn":8.99},
 "feels_like":{"day":17,"night":11.02,"eve":14.6,"morn":7.58},
 "pressure":1017,"humidity":54,
 "dew_point":8.69,
 "wind_speed":1.2,
 "wind_deg":164,
 "weather":[{"id":501,"main":"Rain","description":"moderate rain","icon":"10d"}],
 "clouds":82,
 "pop":0.94,
 "rain":5.85,
 "uvi":15.14}

]
}
  

Итак, как вы можете видеть, я могу печатать в своем HTML данные, содержащиеся в «data.daily [0].temp.», но это работает только для первого набора полей, и я понятия не имею, как выбрать конкретную итерацию. Я уверен, что мне чего-то не хватает в конкате, но пока ничего из того, что я пробовал, не сработало.

Любая помощь будет высоко оценена и вознаграждена воображаемой вафлей. СПАСИБО: D

Температуры за каждый день data.daily определяются как массив объектов JavaScript. Вы можете просто получить к ним доступ по их индексу, который указывает их положение в массиве.

 data.daily[0] // First element
data.daily[1] // Second element
data.daily[2] // Third element
  

После того, как вы выбрали объект в массиве, вы можете получить доступ к определенным значениям, таким как data.daily[2].temp.max .

Самое классное в массивах то, что вы можете повторять их с помощью цикла. Это сэкономит вам много времени на написание, если вы хотите распечатать каждую температуру на каждый день:

 ajaxGet("https://api.openweathermap.org/data/2.5/onecall?lat=4.6097amp;lon=-74.0817amp;exclude=current,minutely,hourly,alertsamp;appid=YOUR_API_KEY_HEREamp;units=metric", function (response) {

  var data = JSON.parse(response);
  console.log(data);

  data.daily.forEach(function (date) {
    var temperature = document.createElement("h6");
    temperature.textContent = date.temp.max   "°"   " / "   date.temp.min   "°";

    document.getElementById("temperaturaBogVier").appendChild(temperature);
  })
});
  

Пожалуйста, обратите внимание: я удалил appid=XXXXX часть URL-адреса запроса, потому что он содержит ваш личный ключ API для OpenWeather, которым вы не должны делиться публично.

Если я правильно понимаю вопрос, вы хотите взять все ежедневные максимальные / минимальные значения и поместить их в элементы, которые вы хотите добавить к другому элементу.

Вот способ сделать это

 ajaxGet("https://api.openweathermap.org/data/2.5/onecall?lat=4.6097amp;lon=-74.0817amp;exclude=current,minutely,hourly,alertsamp;units=metric", function (response) {
    var data = JSON.parse(response);
    console.log(data);

    data.daily
        .map(datapoint => datapoint.temp) //get the temp value/object from each datapoint
        .map(temp => { //create an element and add each max/min value to that element's textContent
            const temperature = document.createElement("h6");
            temperature.textContent = temp.max   "° / "   temp.min   "°";
            return temperature;
        })
        .forEach(element => { //add each of the elements created in the previous map to the desired element
            document.getElementById("temperaturaBogVier").appendChild(element);
        });
});
  

Как указано в другом ответе, я также удалил параметр запроса app-id