Angular中如何遍历JSON数据并渲染指定结构的表格

我正尝试使用如下JSON结构创建对应表格：

我正尝试使用如下JSON结构创建对应表格。

{"status":200,"message":"success","result":{"report":[["SOUTH","ANDHRA-PRADESH","ITR",0.0000,0.0000,null,229.9800,0.0000],
["SOUTH","ANDHRA-PRADESH","OPC",84490.0000,6426.2000,0.0000,7183.7800,77306.0000]
]}}

预期效果见下图：

以下是我目前已尝试的示例代码，恳请大家帮忙解决问题，非常感谢！

<table style="border:1px solid #CCC">
  <thead>
      <tr>
          <th rowspan="2">Zn</th>
          <th rowspan="2">P Name</th>
        <ng-container *ngFor="let unique of arr">
          <th rowspan="1" colspan="4">{{unique.grade}}</th>
        </ng-container>
      </tr>
      <tr>
          <th>I</th>
          <th>II</th>
          <th>III</th>
          <th>IV</th>
          <th>V</th>
          <th>VII</th>
          <th>VIII</th>
          <th>8</th>
          <th>9</th>
          <th>10</th>
          <th>11</th>
          <th>12</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let hero of result.report;let i = index">
          <td>{{hero[0]}}</td>
          <td>{{hero[1]}}</td>
          <td>{{hero[3]}}</td>
          <td>{{hero[4]}}</td>
          <td>{{hero[5]}}</td>
          <td>{{hero[6]}}</td>
       </tr>
      
  </tbody>
</table>

解决方法 #

首先在组件ts文件中对原始数据做分组处理，提取唯一的业务类型作为表头分组维度，同时把同区域同省份的不同类型数据合并为单行：

// 接口返回的原始数据
const resData = {"status":200,"message":"success","result":{"report":[["SOUTH","ANDHRA-PRADESH","ITR",0.0000,0.0000,null,229.9800,0.0000],["SOUTH","ANDHRA-PRADESH","OPC",84490.0000,6426.2000,0.0000,7183.7800,77306.0000]]}};

// 提取去重的类型生成分组表头
this.arr = Array.from(new Set(resData.result.report.map(item => item[2]))).map(type => ({grade: type}));

// 按区域+省份分组合并数据
const dataGroup = new Map();
resData.result.report.forEach(item => {
  const groupKey = `${item[0]}_${item[1]}`;
  if(!dataGroup.has(groupKey)) {
    dataGroup.set(groupKey, {
      zn: item[0],
      pName: item[1],
      typeValues: {}
    });
  }
  // 存储当前类型对应的4个数值列
  dataGroup.get(groupKey).typeValues[item[2]] = [item[3], item[4], item[5], item[6]];
});
// 最终渲染用的表格行数据
this.tableRows = Array.from(dataGroup.values());

然后修改模板代码，动态生成列，不要写死子表头数量：

<table style="border:1px solid #CCC; border-collapse: collapse;" border="1">
  <thead>
    <tr>
      <th rowspan="2">Zn</th>
      <th rowspan="2">P Name</th>
      <ng-container *ngFor="let unique of arr">
        <th colspan="4">{{unique.grade}}</th>
      </ng-container>
    </tr>
    <tr>
      <ng-container *ngFor="let unique of arr">
        <th>I</th>
        <th>II</th>
        <th>III</th>
        <th>IV</th>
      </ng-container>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of tableRows">
      <td>{{row.zn}}</td>
      <td>{{row.pName}}</td>
      <ng-container *ngFor="let unique of arr">
        <td>{{row.typeValues[unique.grade]?.[0] || 0}}</td>
        <td>{{row.typeValues[unique.grade]?.[1] || 0}}</td>
        <td>{{row.typeValues[unique.grade]?.[2] ?? '-'}}</td>
        <td>{{row.typeValues[unique.grade]?.[3] || 0}}</td>
      </ng-container>
    </tr>
  </tbody>
</table>

空值会自动替换为-，数值为空默认显示0，完全匹配预期的分组表格效果。

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