Проблема с получением определенного поля из выходных данных OpenWeatherMap API через JS/XMLHttpRequest

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

ajaxGet("https://api.openweathermap.org/data/2.5/onecall?lat=4.6097&lon=-74.0817&exclude=current,minutely,hourly,alerts&appid=APPID&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.6097&lon=-74.0817&exclude=current,minutely,hourly,alerts&appid=APPID&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., но это работает только для первого набора полей, и я понятия не имею, как выбрать конкретный итерация. Я уверен, что мне что-то не хватает в concat, но ничего из того, что я пробовал, пока не сработало.

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


javascript openweathermap concatenation
person Diego P.    schedule 23.09.2020    source источник
comment
Вы имеете в виду data.daily[1], data.daily[2] и т. д.? Или что вы имеете в виду под конкретной итерацией?   -  person D Malan    schedule 23.09.2020
comment
@DMalan Ну, в выходных данных есть массив в data.daily[0], который содержит только один список, поэтому нет data.daily[1], data.daily[2] и т. д. Я пытаюсь удержать на элементы, содержащиеся в этом списке, но, поскольку он не является массивом сам по себе, я не очень уверен, как это сделать... кстати, за ваш ответ   -  person Diego P.    schedule 23.09.2020
comment
Вы можете удалить или заменить часть appid=XXXX URL-адреса запроса. Это ваш личный ключ API для OpenWeather, которым вы не должны делиться.   -  person stekhn    schedule 23.09.2020
comment
@ДиегоП. data.daily[0] — это объект, а data.daily — массив, который вы можете индексировать с помощью data.daily[1], data.daily[2] и т. д.   -  person D Malan    schedule 23.09.2020
comment
@DMalan спасибо, ты был совершенно прав. Я вызывал только одну строку, поэтому не смог получить остальную информацию. Ваше здоровье!   -  person Diego P.    schedule 23.09.2020

Ответы (2)


arrow_upward
1
arrow_downward

Температуры на каждый день 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.6097&lon=-74.0817&exclude=current,minutely,hourly,alerts&appid=YOUR_API_KEY_HERE&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, который вы не должны публиковать.

person stekhn    schedule 23.09.2020
comment
Большое спасибо за ваше объяснение, я неправильно обрабатывал массив. Он работает отлично! - person Diego P.; 23.09.2020

arrow_upward
0
arrow_downward

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

Вот как это сделать

ajaxGet("https://api.openweathermap.org/data/2.5/onecall?lat=4.6097&lon=-74.0817&exclude=current,minutely,hourly,alerts&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);
        });
});

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

person Misantorp    schedule 23.09.2020