Question

我在localhost中运行了两个文件（HTML和JSON），并使用$ .getJSON来调用JSON文件。

但不知道为什么它没有在我的表格中显示内容

我的HTML文件是：

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
    $(function() {
   var people = [];

   $.getJSON('people.json', function(data) {
       $.each(data.feed, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.name + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });
   });
});
</script>
</head>
<body>
<div class="wrapper">
<div class="profile">
   <table id= "userdata" border="2">
  <thead>
            <th>First Name</th>
        </thead>
      <tbody>
       </tbody>
   </table>
</div>
</div>
</body>
</html>

我的JSON文件是：

{
   "feed": {
      "data": [
         {
            "name": "jack",
            "message": "hello jack",
         },
         {
            "name": "jack",
            "message": "hello jack",
         }
]
}
}

是Json不正确还是html文件中的脚本有错误？

Answer 1

尝试$.each(data.feed.data,，data是来自object的密钥，它是密钥的值feed

Answer 2

我相信当你做$ .each时，你的水平还不够。你仍然需要迭代对象“数据”中的项目 - 所以我认为它是

$.getJSON('people.json', function(data) {
       $.each(data.feed.data, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.name + "</td>" + "</tr>"
           $(tblRow).appendTo("#userdata tbody");
     });
   });

Answer 3

你有两个问题：

1）JSON不正确。请在"hello jack"之后删除不必要的逗号：

{
  "feed": {
    "data": [
      {
        "name": "jack",
        "message": "hello jack"
      },
      {
        "name": "jack",
        "message": "hello jack"
      }
    ]
  }
}

2）更正从解析的JSON访问数据的方式（将$.each()参数更改为data.feed.data）：

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
  <script>
    $(function() {
      var people = [];

      $.getJSON('people.json', function(data) {
        console.log(data);
        $.each(data.feed.data, function(i, f) {
          var tblRow = "<tr>" + "<td>" + f.name + "</td>" + "</tr>";
          $(tblRow).appendTo("#userdata tbody");
        });
      }).fail(function(error) {
        console.error(error);
      });
    });
  </script>
</head>
<body>
<div class="wrapper">
  <div class="profile">
    <table id= "userdata" border="2">
      <thead>
      <th>First Name</th>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>
</body>
</html>

3）使用请求返回的promise并处理错误。它将帮助您在将来更容易地发现这些问题。

JSON数据未显示

3 个答案: