Question

我写了下面的代码但是在输出中我得到了object.object。请告诉我问题和解决方案

代码

＆＃13;

    $(document).ready(function(){
       alert("success");
       
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?appid=f97a52c4251d786439d16642a76845d3&q=london', function(data) {
         JSON.stringify(data);
         var items = [];
      $.each( data, function( key, val ) {
        items.push( "<li id='" + key + "'>" + val + "</li>" );
      });
     
      $( "<ul/>", {
        "class": "my-new-list",
        html: items.join( "" )
      }).appendTo( "body" );
    });
       
       
       alert("sucess");
       
    })

＆＃13;

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    </head>
    <body>
    
    <p>This is a paragraph.</p>
    
    </body>
    </html>

＆＃13;

输出：

[object Object] [对象] 站 [对象] 10000 [对象] [对象] 1492455000 [对象] 2643743 伦敦 200

JSON从端点返回：

{
  "coord": {
    "lon": -0.13,
    "lat": 51.51
  },
  "weather": [
    {
      "id": 804,
      "main": "Clouds",
      "description": "overcast clouds",
      "icon": "04d"
    }
  ],
  "base": "stations",
  "main": {
    "temp": 283.31,
    "pressure": 1024,
    "humidity": 46,
    "temp_min": 282.15,
    "temp_max": 285.15
  },
  "visibility": 10000,
  "wind": {
    "speed": 3.1,
    "deg": 340
  },
  "clouds": {
    "all": 92
  },
  "dt": 1492453200,
  "sys": {
    "type": 1,
    "id": 5091,
    "message": 0.0872,
    "country": "GB",
    "sunrise": 1492405121,
    "sunset": 1492455727
  },
  "id": 2643743,
  "name": "London",
  "cod": 200
}

Answer 1

首先是这一行：

JSON.stringify(data);

什么都不做，因为你没有把结果分配给任何东西。它不会改变原始的data。

其次，[object Object]是在对象上调用toString的默认行为。你的JSON中有对象。例如这个人：

"coord": {
    "lon": -0.13,
    "lat": 51.51
}

coord的值是具有属性lon和lat的对象。如果你想以某种人类可读的格式打印它们，你需要告诉它如何做到这一点。

超级快速和肮脏的方式将像@JaredSmith在评论中建议的那样做，如：

items.push( "<li id='" + key + "'>" + JSON.stringify(val) + "</li>" );

这给了你：

$(document).ready(function(){
       alert("success");
       
    $.getJSON('http://api.openweathermap.org/data/2.5/weather?appid=f97a52c4251d786439d16642a76845d3&q=london', function(data) {
         JSON.stringify(data);
         var items = [];
      $.each( data, function( key, val ) {
        items.push( "<li id='" + key + "'>" + JSON.stringify(val) + "</li>" );
      });
     
      $( "<ul/>", {
        "class": "my-new-list",
        html: items.join( "" )
      }).appendTo( "body" );
    });
       
       
       alert("sucess");
       
    })

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    </head>
    <body>
    
    <p>This is a paragraph.</p>
    
    </body>
    </html>

从最终用户的角度来看，这仍然是丑陋的。但要解决这个问题，您需要实际决定如何格式化数据。

稍微不那么难看的版本可能会做这样的事情：

$(document).ready(function() {
  $.getJSON('http://api.openweathermap.org/data/2.5/weather?appid=f97a52c4251d786439d16642a76845d3&q=london', function(data) {
    var items = [];
    $.each(data, function(key, val) {
      unwrapObject(items, key, val);
    });

    $("<ul/>", {
      "class": "my-new-list",
      html: items.join("")
    }).appendTo("body");
  });


  function unwrapObject(items, key, val) {
    if (typeof(val) === "object") {
      items.push("<li>" + key + "</li>");
      items.push("<ul>");
      for(var p in val) {
        unwrapObject(items, p, val[p]);
      }
      items.push("</ul>");
    } else {
      items.push("<li id='" + key + "'>" + val + "</li>");
    }
  }
});

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>

<body>

  <p>This is a paragraph.</p>

</body>

</html>

Answer 2

在这里，您可以看到我将其记录到控制台中的样子。我们得到了一个常规的对象：）

你有一个对象的响应，所以你需要像这样处理这个对象

items.push( "<li id='" + JSON.stringify(key) + "'>" + JSON.stringify(val) + "</li>" );

Answer 3

您将此多维JavaScript对象视为平面数组。

当你得到一个对象时，你必须像这样迭代它。

$.each( data, function( key, val ) {
    if (typeof val == 'object') {
        $.each( val, function( key, val ) {
            items.push( "<li id='" + key + "'>" + val + "</li>" );
        });
    }
    else {
        items.push( "<li id='" + key + "'>" + val + "</li>" );
    }
});

您正在提供关于此问题的API密钥。您可能希望稍后更改它..

json对象 - 没有得到输出而不是获取object.object

3 个答案: