Блог

Всем привет, я столкнулся с проблемой создания желаемой html-таблицы с помощью colspan в соответствии с моими данными json.Например, мой список массивов 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), название книги и количество, что я пытаюсь сделать, сгенерируйте таблицу из этих данных.Формат столбца таблицы будет похож на категорию, тип, имя и количество, я прикрепил ниже чертежное изображение, которое я хочу сгенерировать, но я не знаю, как это сделать

Возможно ли это вообще с помощью 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(); 
 }
});
});
});
  

Мне нужно отобразить мои данные, как изображение, которое я прикрепил, если это возможно.Спасибо

Преобразуйте ваши данные в представление, которое проходит через like — category-> Types этой категории-> Book, count этого типа.

 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