无法使用 jquery 从 API 获取天气值答案

【问题标题】：Can not get weather values from the API with jquery无法使用 jquery 从 API 获取天气值
【发布时间】：2020-06-16 08:13:20
【问题描述】：

我尝试从天气 API 获取天气值，但无法获取城市名称和其他属性。当我尝试将它们推送到数组中时，项目无法将其投影到 HTML 页面

请看下面的代码：

var url = "https://api.weatherbit.io/v2.0/forecast/daily?city=london,gb,&key=f0e406af6ebf4937862f9f50ae78125b";

function getWeather(){
$.getJSON( url, function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    var weather = {
      cityName:val.city_name,
      longtitude:val.lon,
      timezone:val.timezone,
      latitude:val.lat,
      countryState:val._state
    }


    items.push("<li>"+weather+"</li>");
  });

  $( "<ul/>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});
}

【问题讨论】：

var weather 是一个 JavaScript 对象。当被 li 标签包围时，它不会创建一个有效的 HTML 元素。
您需要通过对象的属性来访问对象，而不是通过尝试将它们连接到字符串或join() 将它们像数组一样。您也不需要循环，因为响应中只返回了一组city_name、lon、lat 等。您想在 UI 中显示哪些值？
您的 API 响应包含单个位置（“伦敦”，如您的 url 参数所述）和多天的天气预报。该数组包含在响应对象的data 属性中（您也将其命名为data，因此您需要遍历data.data）。在数组项中，没有关于城市和州的信息，它位于对象的顶级属性中。
我正在尝试显示城市名称、时区和国家/地区，并根据 lon 和 lat 获取天气
@GeoD 请查看更新后的答案。这就是你想要的。

标签： javascript html jquery json

【解决方案1】：

您可以像在演示中一样访问这些属性。

这是工作演示： https://jsfiddle.net/usmanmunir/acghx45z/19/

var url = "https://api.weatherbit.io/v2.0/forecast/daily?city=london,gb,&key=f0e406af6ebf4937862f9f50ae78125b";

function getWeather(){
$.getJSON( url, function( data ) {
  var items = [];
  let newData = {}
    $.each(data, function( key, val ) {
      if (key != 'data') {
        newData[key] = data[key]
      } 
    });
    $.each(newData, function( key, val ) {
      items.push("<li>"+key+" : "+val+"</li>");
    });
    
  $( "<ul/>", {"class": "my-new-list",html: items}).appendTo( "body" );
 });
}

getWeather()

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

这是一个简化版：


var url = "https://api.weatherbit.io/v2.0/forecast/daily?city=london,gb,&key=f0e406af6ebf4937862f9f50ae78125b";

function getWeather(){
$.getJSON( url, function( data ) {
  var items = [];

  items.push("<li>"+data.city_name+"</li>");
  items.push("<li>"+data.lon+"</li>");
  items.push("<li>"+data.timezone+"</li>");
  items.push("<li>"+data.lat+"</li>");
  items.push("<li>"+data.state_code+"</li>");


  $( "<ul>", {
    "class": "my-new-list",
    html: items.join( "" )
  }).appendTo( "body" );
});
}

getWeather();

您不需要循环。事实上，从你想要做的事情来看，如果你想要得到的只是这些特定的值，那么循环是没有意义的。

在您的代码中，您循环遍历数据对象中的每个键，并在每次迭代时创建一个新对象，然后将其推送到您的 items 数组。您还试图访问未定义的值。

~~上面的答案是不正确的，因为它遍历对象中的每个键，而对象本身可能是一个对象，并导致像 [object] 这样的损坏输出。~~

查看 mozilla 上的文档：Javascript - Working with objects

【讨论】：