從 javascript 中的多維數組創建 html 表

Question

我正在嘗試從具有嵌套對象的多維數組構建 html 表。 我正在嘗試做這樣的事情：

我需要將 output 的數據specs放入一個表中， key在 col A 中，值在整個表中。 如果另一個產品中的密鑰為空，我想添加一個--

如何將鍵和值對放入包含嵌套數據的表中？

小提琴

 const tableHead = document.querySelector('.responsive-table.js-th'); const tableBody = document.querySelector('.responsive-table.js-tb'); const getData = [ [{ title: 'title1', image: 'https://placehold.it/25x25', price: '$55.55', specs: { weight: '40lbs', color: 'yellow', available: true } }], [{ title: 'title2', image: 'https://placehold.it/25x25', price: '$55.55', specs: { color: 'red', available: false } }], [{ title: 'title3', image: 'https://placehold.it/25x25', price: '$55.55', specs: { available: true } }] ] buildTable(); //console.log(getData); function buildTable() { let rows = ''; for (let i = 0; i < getData.length; i++) { // console.log(getData[i][0].title) let head = ` <th> <img src="${getData[i][0].image}" /> <p>${getData[i][0].title}</p> <p>${getData[i][0].price}</p> </th> ` tableHead.insertAdjacentHTML('afterbegin', head); } tableHead.insertAdjacentHTML('afterbegin', '<th>specs</th>'); for (var p in getData) { for (var k in getData[p]) { rows += '<tr><td>' + k + '</td><td>' + getData[p][k] + '</td></tr>' } } tableBody.insertAdjacentHTML('afterbegin', rows); }

 <table class="responsive-table"> <thead> <tr class="js-th"></tr> </thead> <tbody class="js-tb"></tbody> </table>

Answer 1

我不知道 JSX，所以我稍微重寫了 header 部分，但基本相同。

對於規范部分，我創建了一個包含所有規范的集合（我使用集合而不是數組來防止重復），然后為每個規范在 bodyTable 中添加一行。

 const tableHead = document.querySelector('.responsive-table.js-th'); const tableBody = document.querySelector('.responsive-table.js-tb'); const getData = [ [{ title: 'title1', image: 'https://placehold.it/25x25', price: '$55.55', specs: { weight: '40lbs', color: 'yellow', available: true } }], [{ title: 'title2', image: 'https://placehold.it/25x25', price: '$55.55', specs: { color: 'red', available: false } }], [{ title: 'title3', image: 'https://placehold.it/25x25', price: '$55.55', specs: { available: true, test: true } }] ]; /* table header */ const head = getData.forEach(([data]) => { const th = document.createElement('th'); th.innerHTML = ` <img src="${data.image}" alt=""> <p>${data.title}</p> <p>${data.price}</p> `; tableHead.append(th); }); /* * make a Set of all specs */ const specs = getData.reduce((set, [data]) => { Object.keys(data.specs).forEach(set.add, set); return set; }, new Set()); /* create a row per spec */ specs.forEach(spec => { const tr = document.createElement('tr'); tr.innerHTML = `<td>${spec}</td>`; getData.forEach(([data]) =>{ const td = data.specs[spec] || '--'; tr.innerHTML += `<td>${td}</td>`; }); tableBody.append(tr); });

 <span>example:</span> <blockquote class="imgur-embed-pub" lang="en" data-id="a/It4o7M6" data-context="false"><a href="//imgur.com/a/It4o7M6"></a></blockquote> <script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script> <table class="responsive-table"> <thead> <tr class="js-th"></tr> </thead> <tbody class="js-tb"></tbody> </table>

就像在您的示例規范中一樣： false 將導致單元格中出現“--”。 如果您想在單元格中使用false ，則需要更改該行

const td = data.specs[spec] || '--';

經過

const td = Object.keys(data.specs).includes(spec) ? data.specs[spec] : '--';

請注意，您的示例中似乎存在錯誤。 在單元格 D4 中不應該是true嗎？