通过 JS / XMLHttpRequest 从 OpenWeatherMap API 输出中获取特定字段时遇到问题答案

【问题标题】：Trouble getting a specific field from OpenWeatherMap API's output, via JS / XMLHttpRequest通过 JS / XMLHttpRequest 从 OpenWeatherMap API 输出中获取特定字段时遇到问题
【发布时间】：2021-01-09 23:34:18
【问题描述】：

所以我正在使用 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 中，但它仅适用于第一组字段，我不知道如何选择特定的迭代。我确定我在 concat 中遗漏了一些东西，但到目前为止我没有尝试过任何东西。

我们将不胜感激任何帮助，并获得一个虚构的华夫饼作为奖励。谢：D

【问题讨论】：

你的意思是像data.daily[1]、data.daily[2]等吗？或者你对特定的迭代是什么意思？
@DMalan 好吧，输出在 data.daily[0] 中有一个数组，其中只包含一个列表，所以没有 data.daily[1]、data.daily[2] 等。我正在尝试保留此列表中包含的元素，但由于它本身不是一个数组，因此我不太确定该怎么做...顺便说一句，请您回复
您可以考虑删除或替换请求 URL 的 appid=XXXX 部分。这是您的 OpenWeather 个人 API 密钥，您不应共享。
@DiegoP。 data.daily[0] 是一个对象，data.daily 是一个数组，您可以使用 data.daily[1]、data.daily[2] 等进行索引。
@DMalan 谢谢，你完全正确。我只调用了一行，这就是为什么我无法获取其余信息的原因。干杯！

标签： javascript concatenation openweathermap

【解决方案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 部分，因为它包含您的 OpenWeather 个人 API 密钥，您不应公开分享。

【讨论】：

非常感谢您的解释，我错误地处理了数组。效果很好！

【解决方案2】：

如果我正确理解了这个问题，您希望获取所有每日最大值/最小值并将它们放入要附加到另一个元素的元素中。

这是一种方法

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 查询参数

【讨论】：