无法通过 JS / XMLHttpRequest 从 OpenWeatherMap API 的输出中获取特定字段

Question

所以我正在使用 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}

]
}

如您所见，我可以将包含在“data.daily[0].temp.”中的数据打印到我的 HTML 中，但它仅适用于第一个一组字段，我不知道如何 select 特定的迭代。我确定我在 concat 中遗漏了一些东西，但到目前为止我尝试过的任何东西都没有用。

任何帮助将不胜感激，并奖励一个想象中的华夫饼。谢谢：D

Answer 1

每天 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);
  })
});

请注意：我删除了请求 URL 的 appid=XXXXX 部分，因为它包含您的个人 API 密钥OpenWeather，您不应公开分享。

Answer 2

如果我对这个问题的理解正确，你想把所有的日常 max/min-values 放入你想附加到另一个元素的元素中。

这是一种方法

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);
        });
});

正如另一个答案中所指出的，我还删除了 app-id 查询参数

无法通过 JS / XMLHttpRequest 从 OpenWeatherMap API 的输出中获取特定字段

Trouble getting a specific field from OpenWeatherMap API's output, via JS / XMLHttpRequest

javascript

concatenation

openweathermap