如何在JavaScript中按ProductId生成带分组详情的嵌套表格

我尝试在JavaScript中依据ProductId对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"
  }
 ]
}

期望的表格样式 #

=============================================================
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: Supplier , 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>";
  }
});

解决方案 #

核心思路是先将数据按productid分组，再遍历每个分组依次渲染组内数据行和详情行，确保每组结束后都能添加对应的详情：

let products = JSON.parse(response);
// 1. 按productid分组数据
const groupedProducts = products.results.reduce((acc, product) => {
  const key = product.productid;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(product);
  return acc;
}, {});

// 2. 构建表格
let _productgrid = "<table><tr><th>name</th><th>description</th><th>id</th></tr>";

// 遍历每个分组
Object.values(groupedProducts).forEach(group => {
  // 渲染组内所有数据行
  group.forEach(product => {
    _productgrid += `<tr><td>${product.name}</td><td>${product.description}</td><td>${product.productid}</td></tr>`;
  });
  // 渲染该组的详情行（取组内第一个条目描述即可，同组id一致）
  const groupInfo = group[0];
  _productgrid += `<tr><td colspan="3">
    show details for the product id i.e<br>
    Description: ${groupInfo.description}, ProductId : ${groupInfo.productid}
  </td></tr>`;
});

_productgrid += "</table>";

说明

• 用reduce方法把原始数据按productid归类，每个分组保存同id的所有条目，逻辑更清晰
• 遍历每个分组时，先渲染组内所有完整数据行，再添加一个跨三列的详情行展示分组信息
• 无论组内有多少条数据，每组结束后都会自动生成对应的详情行，解决了原代码无法添加详情的问题

内容的提问来源于stack exchange，提问作者snowflakes74