在 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>