JSON 多维数组到 HTML 表

Question

我有一个条件要求我使用 json 多维制作一个 html 表。 这是我的 JSON 数据示例

let year = [
  {
    ym : "202006",
    data : [
       {
         202007: "100", 
         202008: "100", 
         202009: "100", 
         202010: "100", 
         202011: "96.71", 
         202012: "100", 
         202101: "100", 
         202102: "96.43"
       }
    ]
  }
];

这是我的预期结果

我已经设法使用循环创建表头。但是我发现使用这个 JSON 数据生成表数据时很困难。 任何形式的帮助都会非常感激。谢谢

编辑：

我能够使用原始数据生成表头。 我使用的代码是

result = arr.reduce(function (r, a) {
    r[a.TIME_PERIOD_HEADER] = r[a.TIME_PERIOD_HEADER] || [];
    r[a.TIME_PERIOD_HEADER].push(a);
    return r;
}, Object.create(null));

var keys = Object.keys(result);

keys.map((value, index) => {
  $('#tbl_row').append('<th>'+value+'</th>')
})

生成表头后，我尝试使用以下方法将原始 json 数组修改为新的 json 数组：

var o = arr.reduce( (a,b) => {
  a[b.TIME_PERIOD] = a[b.TIME_PERIOD] || [];
  a[b.TIME_PERIOD].push({[b.TIME_PERIOD_DATA]:b.PERCENT});
  return a;
}, {});

var a = Object.keys(o).map(function(k) {
  var m = Object.assign.apply({},o[k]);
    keys.forEach( (x) => { if ( !(x in m) ) m[x] = 0 });
    
    return {TIME_PERIOD: k, TIME_PERIOD_DATA: m};
});
//this code produce the first JSON data (let year = ....)

Answer 1

以下 sn-p 忽略了 data 是一个数组，因为您的预期输出也忽略了它。

let year = [
  {
    ym : "202006",
    data : [
       {
         202007: "100", 
         202008: "100", 
         202009: "100", 
         202010: "100", 
         202011: "96.71", 
         202012: "100", 
         202101: "100", 
         202102: "96.43"
       }
    ]
  }
];

let columns = year
  .map (y => y.data)
  .flat (1)
  .map (d => Object.keys(d))
  .flat (1)
  .sort ()
  .filter ((x, i, a) => !i || x != a[i-1]);

document.write ('<table><tdata>');
document.write ('<tr style="text-transform: uppercase">');
document.write ('<th rowspan="2">time period</th>');
document.write (`<th colspan=${columns.length}>time period data</th>`);
document.write ('</tr></tr>');
for (const c of columns) {
  document.write (`<td>${c}</td>`);
}
document.write ('</tr>');
for (const y of year) {
  document.write (`<tr><td>${y.ym}</td>`);
  for (const c of columns) {
    document.write (`<td>${y.data[0][c]}</td>`);
  }
  document.write ('</tr>');
}
document.write ('<tdata><table>');

这个想法是：迭代所有数据以计算列列表。之后迭代多年，每年迭代列以从列的数据中选择正确的值。排序后的过滤器使排序列表唯一，因为代码收集了所有数据对象的所有列。