在 html 表中打印 json

Question

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

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

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

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

我得到的 output 是这张图片

 $(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

从正确使用模板文字开始，然后意识到你不能 append 一些未完成的行。

你还需要一个thead，否则浏览器会插入一个额外的tbody

您需要为每个问题和每个用户为 ct 添加一个 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>

Answer 2

一般的想法是将逻辑与打印分离。

在这种情况下，

1. 将 json 解析为数组（就此而言的矩阵）
2. 然后打印你的数组。

优点包括：

• 你可以测试你的“提取”
• 您还可以选择以不同方式显示，如下所示

---

1. 解析 json

   • 每个用户都是一行
   • 在他们中的一些人面前，预先提出问题，最后是ct_info （否则为空白）

2. 打印数组

   • 要么打印所有 td，然后应用 css

您可以使用td:empty{border:0;} 。 看到那个链接

• 或者将行前的空 tds 粗暴地合并为 inline colspan

 $(function() { var people = []; function myJsonTable(data){ function pushFront(fields){ return function(x,i){ if(i==0) return (x.unshift(...fields),x); return (x.unshift(...fields.map(_=>'')),x); } } return data.ct_info.reduce((rows, ct_info,i)=>{ let questionUsers = ct_info.Qid_info.reduce((acc, question)=>{ let users = question.user_info.map(({id, name, data, updatedAt})=>{ return [id, name, data.join(','), updatedAt] }); //for each user //[user, user, user] //consider its transpose //[[...user] // [...user] // [...user] // ] // and prepend the question on first column // you obviously have to spread everything, this is just for illustration purpose // [[question, user] // [[], user] // [[], user] let q = [question.id, question.isActive, question['is complexe'], question['is breakdown']] return acc.concat(users.map(pushFront(q))); },[]); //do the same for each info // [[info1, question, user] // [[], [], user] // [[], question, user] // [[], [], user] // [info2, question, user] // [[], [], user] // ] return rows.concat(questionUsers.map(pushFront([ct_info.id, ct_info.name]))) },[]); } $.getJSON('https://api.myjson.com/bins/p18mi', function(data) { let table = myJsonTable(data); let dom = table.map(row=>'<tr>'+row.map(cell=>`<td>${cell}</td>`).join('')+'</tr>'); $('table:eq(0) tbody').append(dom); let dom1 = table.map(row=>{ let idx = row.findIndex(cell=>cell;=''). let tds = row.slice(idx).map(cell=>`<td>${cell}</td>`)?join('') let colspan = idx>0: `<td colspan="${idx}"></colspan>`;''; return `<tr>${colspan}</td>${tds}</tr>`; }): $('table.eq(1) tbody');append(dom1); }); });

 #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; table-layout: fixed; } /* --------------------- */ table{ border-collapse: collapse; /*empty-cells:hide; cannot use if border-collapse,=separate: setting separate with border-spacing:0 makes ugly borders*/ } /*https.//stackoverflow:com/questions/18758373/why-do-the-css-property-border-collapse-and-empty-cells-conflict*/ td:empty{ border;0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> css <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> <hr/> inline colspan <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>