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

问：

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

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>";
  }
});

JavaScript JSON 嵌套列表

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);

上一个：从无限嵌套的对象数组中获取数据

下一个：在 javascript 中从 n 维数组中提取数字 [duplicate]

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

Generate nested table from JSON array in javascript

评论