在javascript中从JSON数组生成嵌套表

Question

我试图从json表按产品id分组生成嵌套/分组表网格，然后在每个组显示组的详细信息后，但由于某种原因，我无法弄清楚如何添加组的详细信息显示。

json结构

{  "results":
[
{
"name":"DELL",
"description":"Customer",
"productid":"87cc0d37-685a-ed11-97b0-00155d6985db"
}
,{
"name":"DELL",
"description":"Customer",
"productid":"87cc0d37-685a-ed11-97b0-00155d6985db"
}
,
{
"name":"DELL",
"description":"Supplier",
"productid":"2a17c577-8260-ed11-97b0-00155d6985db"
}
]
}

我希望表如下所示，按产品id

分组

=============================================================
name  | Description     | ProductId
=====  ============     =========
Dell   Customer         87cc0d37-685a-ed11-97b0-00155d6985db
Dell   Customer         87cc0d37-685a-ed11-97b0-00155d6985db
=========================================================
show details for the product id i.e
Description: Customer , ProductId : 87cc0d37-685a-ed11-97b0-00155d6985db
===========================================================
Dell  Supplier           2a17c577-8260-ed11-97b0-00155d6985db
============================================================ 
show details for the product id i.e
Description: Customer , ProductId : 2a17c577-8260-ed11-97b0-00155d6985db
============================================================

我所应用的逻辑为我提供了正确的结构，但如果子行包含多个行，我无法在子行下面显示详细信息行:

let _previousProductId = null;
let _productgrid = "<table><tr><th>name</th><th>description</th><th>id</th></tr>";
let products = JSON.parse(response);
products.results.forEach((product) => {
if (_previousProductId !== product.productid) {
_productgrid+="<tr><td>"+product.name+"<td></td><td>"+product.description+"</td><td>"+product.productid +"</td></tr>" 
_previousProductId = product.productid;
}else{
_productgrid+="<tr><td colspan="3">"+product.name+"<td></tr>";
}
});

Answer 1

这样的东西可能是您正在寻找的。它的效率较低，但在尝试从产品ID构建HTML之前，您最好先按产品ID聚合数据。

let products = {
"results": [
{
"name":"DELL",
"description":"Customer",
"productid":"87cc0d37-685a-ed11-97b0-00155d6985db"
},
{
"name":"DELL",
"description":"Customer",
"productid":"87cc0d37-685a-ed11-97b0-00155d6985db"
},
{
"name":"DELL",
"description":"Supplier",
"productid":"2a17c577-8260-ed11-97b0-00155d6985db"
}
]
};
let productsById = {};
let html = '<table><tr><th>name</th><th>description</th><th>id</th></tr>';
for (let product of products.results) {
if (!productsById[product.productid]) {
productsById[product.productid] = [];
}
productsById[product.productid].push(product);
}
for (let key of Object.keys(productsById)) {
for (let product of productsById[key]) {
html += `<tr><td>${product.name}</td><td>${product.description}</td><td>${product.productid}</td></tr>`
}
html += `<tr><td colspan="3">Description: ${productsById[key][0].description}, ProductId: ${productsById[key][0].productid}</td><tr>`;
}
html += '</table>';
console.log(html);