Angular中如何将接口返回的扁平JSON数据转换为指定树形结构？

注意事项 #

你预期的目标结构存在语法缺陷：同一个对象内重复定义instrumentline属性会导致后续值覆盖之前的值，最终只会保留最后一条设备型号数据，因此下面的实现方案将同分组下的设备型号改为数组存储，符合正常业务使用需求。

转换逻辑 #

• 初始化空对象作为分组临时容器，遍历原始接口返回的数据集
• 以instrumtfamily的取值作为分组唯一键
  • 临时容器中不存在该键时，新建分组项，填充instrumtfamily、totalactiveinstrumentfamily、totalactiveinstrumentline三个公共属性，同时初始化对应分类下的设备型号存储数组
  • 临时容器中已存在该键时，直接将当前项的instrumentline值推入对应分组的数组中
• 最终取出临时容器的所有值，即可得到按instrumtfamily分组的树形结构

代码实现（Angular/TypeScript） #

// 原始接口返回数据赋值给rawData变量
const rawData = [
  { instrumtfamily:'unalysis' , instrumentline:'cobas 1000',totalactiveinstrumentfamily : 10,totalactiveinstrumentline :5},
  { instrumtfamily:'unalysis' , instrumentline:'cobas 2000',totalactiveinstrumentfamily : 10,totalactiveinstrumentline :5},
  { instrumtfamily:'Histology' , instrumentline:'cobas 3000',totalactiveinstrumentfamily : 12,totalactiveinstrumentline :3},
  { instrumtfamily:'Histology' , instrumentline:'cobas 4000',totalactiveinstrumentfamily : 12,totalactiveinstrumentline :3}
];

const groupMap: Record<string, any> = {};
rawData.forEach(item => {
  const family = item.instrumtfamily;
  if(!groupMap[family]) {
    groupMap[family] = {
      instrumtfamily: family,
      totalactiveinstrumentfamily: item.totalactiveinstrumentfamily,
      totalactiveinstrumentline: item.totalactiveinstrumentline,
      [family]: {
        instrumentline: []
      }
    }
  }
  groupMap[family][family].instrumentline.push(item.instrumentline);
});

// 最终转换完成的结构
const Resultinstrument = Object.values(groupMap);

输出结果示例 #

[
  {
    "instrumtfamily": "unalysis",
    "totalactiveinstrumentfamily": 10,
    "totalactiveinstrumentline": 5,
    "unalysis": {
      "instrumentline": ["cobas 1000", "cobas 2000"]
    }
  },
  {
    "instrumtfamily": "Histology",
    "totalactiveinstrumentfamily": 12,
    "totalactiveinstrumentline": 3,
    "Histology": {
      "instrumentline": ["cobas 3000", "cobas 4000"]
    }
  }
]

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