表头混合JSON键值时如何将JSON数据正确追加到HTML表格

核心问题 #

你当前的代码会为每条原始数据都生成独立行，且每次只填充一个value单元格，导致后续日期列没有对应数据。要实现目标效果需要先对原始数据做聚合，把相同设备、相同厂商的不同日期数据合并到同一个对象中，再渲染表格。

修改后可直接运行的JS代码 #

let data = [
  {Date:"2021-03-22",device:"Phone",vendor:"Apple",value:11},
  {Date:"2021-03-22",device:"Phone",vendor:"Google",value:10},
  {Date:"2021-03-22",device:"Tablet",vendor:"Apple",value:45},
  {Date:"2021-03-22",device:"Tablet",vendor:"Google",value:57},
  {Date:"2021-03-22",device:"iOT",vendor:"Apple",value:33},
  {Date:"2021-03-22",device:"iOT",vendor:"Google",value:11},
  {Date:"2021-03-22",device:"Smart Watch",vendor:"Apple",value:17},
  {Date:"2021-03-22",device:"Smart Watch",vendor:"Google",value:25},
  {Date:"2021-03-29",device:"Phone",vendor:"Apple",value:9},
  {Date:"2021-03-29",device:"Phone",vendor:"Google",value:20},
  {Date:"2021-03-29",device:"Tablet",vendor:"Apple",value:23},
  {Date:"2021-03-29",device:"Tablet",vendor:"Google",value:15},
  {Date:"2021-03-29",device:"iOT",vendor:"Apple",value:11},
  {Date:"2021-03-29",device:"iOT",vendor:"Google",value:77},
  {Date:"2021-03-29",device:"Smart Watch",vendor:"Apple",value:38},
  {Date:"2021-03-29",device:"Smart Watch",vendor:"Google",value:80}
];

let ths = ['device', 'vendor', '2021-03-22', '2021-03-29'];
ths.forEach(d => $(`#ths`).append(`<th id='${d}'>${d}</th>`));

// 聚合数据：以设备+厂商为唯一键，合并不同日期的数值
const groupedMap = {};
data.forEach(item => {
  const uniqueKey = `${item.device}-${item.vendor}`;
  if (!groupedMap[uniqueKey]) {
    groupedMap[uniqueKey] = {
      device: item.device,
      vendor: item.vendor
    };
  }
  groupedMap[uniqueKey][item.Date] = item.value;
});
const renderData = Object.values(groupedMap);

// 渲染表格行
renderData.forEach(rowItem => {
  const tr = $('<tr class="my_rows"></tr>');
  ths.forEach(colKey => {
    tr.append(`<td>${rowItem[colKey] || ''}</td>`);
  });
  $('#table_body').append(tr);
});

实现逻辑 #

• 先用设备+厂商作为唯一标识，把原始数据中不同日期的value合并到同一个对象下，每个对象会完整包含表头对应的四个属性
• 渲染行时直接遍历表头字段，从聚合好的对象中取对应值填充即可，不会出现列错位、数据缺失的问题

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