通过javascript在html表中打印Json数据

Question

我有JSON数据保存在这个apihttps://api.myjson.com/bins/xeza2中。我想只使用 JavaScript 或 jQuery 打印表格中的数据。我已经尝试了几件事。我使用过 XMLHTTP 请求。 json.parse() 。堆栈上的每个方法。 这是我尝试的第一件事

$(function () {

   var people = [];

   $.getJSON('https://api.myjson.com/bins/xeza2', function (data) {
      $.each(data.info, function (i, f) {
         var tblRow = "<tr>" + "<td>" + f.id + "</td>" +
            "<td>" + f.name + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
         $(tblRow).appendTo("#userdata tbody");
      });

   });

});

Answer 1

data.info 是 undefined 因此为什么您没有将任何内容添加到表格中。您需要将其更改为data.ct_info。

以下代码可以访问请求响应中的 JSON 数据并将其附加到表中。我不确定您希望数据的外观或您尝试访问的属性（因此undefined's）我将留给您，但以下内容应该可以帮助您入门。

f.job 和 f.roll 是不存在的属性。

$(function() {

  var people = [];
  $.getJSON('https://api.myjson.com/bins/xeza2', function(data) {
    $.each(data.ct_info, function(i, f) {

      var tblRow = "<tr>" + `<td id=${f.id}>` + "</td>" +
        "<td>" + f.name + "</td>" + "</tr>"
      $(tblRow).appendTo("#userdata tbody");

      var users = []

      //GET USER INFO
      f.Qid_info.forEach((x) => {
        x.user_info.forEach((y) => {
          //avoid duplicates
          var foundUser = users.find((user) => {
            return user.id === y.id
          })
          if (!foundUser) {
            users.push(y)
          }
        })
      })

      $.each(users, function(i, user) {
        var userRow = "<tr>" + `<td id=${user.id}>` + "User's Name:" +
          "</td>" +
          "<td>" + user.name + "</td>" + "</tr>"
        $(userRow).appendTo("#userdata tbody");
      })

    });

  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='userdata'>
  <tbody>

  </tbody>
</table>