使用colspan根据json数据动态生成表

Question

大家好，我陷入了一个难题，根据我的json数据使用colspan生成了所需的html表。例如，我的json数组列表如下

[0]{category:Math, Type: P, BookName: Book1 ,Count:2}
[1]{category:Math, Type: P, BookName: Book2 ,Count:3}
[2]{category:Math, Type: T, BookName: Book3 ,Count:1}
[3]{category:Math, Type: T, BookName: Book4,Count:2}
[4]{category:Biology, Type: T, BookName: Book1 ,Count:2}
[5]{category:Biology, Type: p, BookName: Book1 ,Count:10}

在这里，我有一些类别为实用（p），理论（T），书名和计数的图书，我正试图从此数据生成表格。表格的列格式将类似于category，Type ，名称和计数，我在下面附加了要生成的图形图像，但我不知道该怎么做

甚至可以通过javascript / jquery轻松实现吗？

我尝试了一些尝试，但似乎没有收获，似乎我距离解决方案还很遥远

我尝试了什么

$(document).ready(function(){
 $.each(data, function (key, item) {
$('table#2 tbody tr td').each(function(){
var value = $(this).html();
if(value.indexOf("Math") !== -1){ 
    $(this).attr("colspan", 2);
  $(this).next("td").remove(); 
 }
});
});
});

如果可能，我需要显示我的数据，如附件中的图像。

Answer 1

将您的数据转换为表示形式，例如-category->该类别的类型->图书，该类型的计数。

let dataMap = new Map();
let totalLevels = 4;
for(let d of data){
    if(!dataMap.get(d.category)){
    dataMap.set(d.category, {totalCount:0, types: new Map()});
  }
  if(!dataMap.get(d.category).types.get(d.Type)){
    dataMap.get(d.category).types.set(d.Type, []);
  }
  dataMap.get(d.category).types.get(d.Type).push({'bookName' : d.BookName, 'Count' : d.Count});
  dataMap.get(d.category).totalCount++;
} 

将每一行推入一个数组。

    let rows = []
for(let i = 0; i<totalLevels;i++){
    rows.push([])
}
for (var [key, value] of dataMap) {
    rows[0].push(`<th colspan=${value.totalCount} id=${key}>${key}</th>`);
  for(var [typeKey,typeValue] of value.types){
    rows[1].push(`<td colspan=${typeValue.length}>${typeKey}</td>`);
    for(let o of typeValue){
        rows[2].push(`<td>${o.bookName}</td>`);
      rows[3].push(`<td>${o.Count}</td>`);
    }
  }
}

然后将行附加到表中。

for(row of rows){
    $('table').append(`<tr>${row}</tr>`);
}

这是一个演示-https://jsfiddle.net/znxhkm7g/