Generate nested table from JSON array in javascript-CodePudding

I am attempting to generate nested/grouped table grid from json table grouped by product id and then after each group show details of the group, but for some reason I can't figure out how to add details of the group to display.

json structure

  {  "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"
  }
 ]
}

I want the table to be like below grouped by product 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
============================================================

The logic I have applied gives me correct structure but I am unable to show details row underneath the child row if the child row contains more than one row:

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

CodePudding user response：

Something like this may be what you're looking for. It's less efficient, but you may be better off aggregating the data by product ID first, before trying to build the HTML from it.

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