javascript - 在html表格中打印json

Question

这是我的 json APi -->>> https://api.myjson.com/bins/p18mi

我有一个表，我必须在其中打印 Json 数据。

问题是我想打印主要问题标题中的问题数据和 thofUser 列中的 User_info 数组。

但它没有按预期工作。我无法正确排列表数据，因此所有用户详细信息必须来自用户列和子列。同样的问题。

我得到的输出是这是图像

$(function() {
  var people = [];
  $.getJSON('https://api.myjson.com/bins/p18mi', function(data) {
    $.each(data.ct_info, function(i, f) {
      var tblRow = " <tr>" + `<td id=${f.id}>` + `${f.id}` + "</td>" +
        "<td>" + f.name + "</td>";
      $(tblRow).appendTo("#userdata tbody");
      var users = []
      var question = []
      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)
          }
        })
      })
      f.Qid_info.forEach((x) => {
        var foundQuestion = question.find((questions) => {
          return questions.id === x.id
        })
        if (!foundQuestion) {
          question.push(x)
        }
      })
      $.each(question, function(i, question) {
        var questionRow = `<td id=${question.id}>` + `${question.id}` +
          "</td>" + "<td>" + question.isActive + "</td><td>" + question.iscomplex + "</td>" +
          "<td>" + question.isbreakdown + "</td>"
        $(questionRow).appendTo("#userdata tbody");
      })
      $.each(users, function(i, user) {
        var userRow = `<td id=${user.id}>` + `${user.id}` +
          "</td>" + "<td>" + user.name + "</td><td>" + user.data + "</td>" +
          "<td>" + user.updatedAt + "</td>"
        $(userRow).appendTo("#userdata tbody");
      })
    });
  });
});

#user {
  overflow-x: auto;
  white-space: nowrap;
}

th,
td {
  font-weight: normal;
  padding: 5px;
  text-align: center;
  width: 120px;
  vertical-align: top;
}

th {
  background: #00B0F0;
}

tr+tr th,
tbody th {
  background: #DAEEF3;
}

tr+tr,
tbody {
  text-align: left
}

table,
th,
td {
  border: solid 1px;
  border-collapse: collapse;
  table-layout: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='userdata'>
  <tr>
    <th colspan="2" id="ct">CT INFO</th>
    <th colspan="4" id="que">Question</th>
    <th colspan="4" id="user">User Info</th>
  </tr>
  <tr>
    <th>CT ID</th>
    <th>CT</th>
    <th>Id</th>
    <th>isActive</th>
    <th>is Complex</th>
    <th>is Breakdown</th>
    <th>ID</th>
    <th>NAME</th>
    <th>Data</th>
    <th>updatedAt</th>
  </tr>
  <tbody>

  </tbody>
</table>

Answer 1

首先正确使用模板文字，然后意识到您无法附加一些未完成的行。

还需要一个标题，否则浏览器会插入一个额外的标题

您需要为每个问题和每个用户添加一个 colspanned 单元格，并为每个问题添加一个 colspanned 单元格给用户。

可以通过 rowspan 来完成，但这现在取决于你。

最后你的关键是“很复杂”和“很崩溃”

$(function() {
  var people = [];
  var ctCells = [], questionCells = [], userCells = [];
  var $tBody = $("#userdata tbody");
  $.getJSON('https://api.myjson.com/bins/p18mi', function(data) {
    $.each(data.ct_info, function(i, f) {
      ctCells.push(`<td id=${f.id}>${f.id}</td><td>${f.name}</td>`);
      var users = []
      var question = []
      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)
          }
        })
      })
      f.Qid_info.forEach((x) => {
        var foundQuestion = question.find((questions) => {
          return questions.id === x.id
        })
        if (!foundQuestion) {
          question.push(x)
        }
      })
      $.each(question, function(i, question) {
        ctCells.push(`<td colspan="2">&nbsp;</td>`)
        questionCells.push(`<td id=${question.id}>${question.id}</td><td>${question.isActive}</td><td>${question["is complex"]}</td><td>${question["is breakdown"]}</td>`);
        
      })
      $.each(users, function(i, user) {
        ctCells.push(`<td colspan="2">&nbsp;</td>`)
        questionCells.push(`<td colspan="4">&nbsp;</td>`)
        userCells.push(`<td id=${user.id}>${user.id}</td><td>${user.name}</td><td>${user.data}</td><td>${user.updatedAt}</td>`);
      })
    });
    $.each(userCells,function(i) {
      $tBody.append(`<tr>${ctCells[i]}${questionCells[i]}${userCells[i]}</tr>`)
    })
  });
});

#user {
  overflow-x: auto;
  white-space: nowrap;
}

th,
td {
  font-weight: normal;
  padding: 5px;
  text-align: center;
  width: 120px;
  vertical-align: top;
}

th {
  background: #00B0F0;
}

tr+tr th,
tbody th {
  background: #DAEEF3;
}

tr+tr,
tbody {
  text-align: left
}

table,
th,
td {
  border: solid 1px;
  border-collapse: collapse;
  table-layout: fixed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='userdata'>
  <thead>
  <tr>
    <th colspan="2" id="ct">CT INFO</th>
    <th colspan="4" id="que">Question</th>
    <th colspan="4" id="user">User Info</th>
  </tr>
  <tr>
    <th>CT ID</th>
    <th>CT</th>
    <th>Id</th>
    <th>isActive</th>
    <th>is Complex</th>
    <th>is Breakdown</th>
    <th>ID</th>
    <th>NAME</th>
    <th>Data</th>
    <th>updatedAt</th>
  </tr>
  </thead>
  <tbody>

  </tbody>
</table>