如何在Angular的TS文件中从已有JSON动态生成嵌套JSON并转为JS数组/Map

我来帮你搞定这个嵌套JSON的处理需求！咱们一步步来，从导入源数据到完成转换，都给你安排得明明白白。

首先，先把你的源JSON文件在项目里安置好——新建一个source-data.json文件，把你提供的JSON内容粘贴进去：

{
  "data": [
    [
      {"dat": "hello", "date": 4, "Nr": "11", "stat": "bye"},
      {"dat": "hello", "date": 2, "Nr": "13", "stat": "bye"},
      {"dat": "hello", "date": 4, "Nr": "11", "stat": "bye"},
      {"dat": "hello", "date": 2, "Nr": "13", "stat": "bye"}
    ],
    [
      {"dat": "hello", "date": 4, "Nr": "11", "stat": "bye"},
      {"dat": "hello", "date": 2, "Nr": "13", "stat": "bye"},
      {"dat": "hello", "date": 4, "Nr": "11", "stat": "bye"},
      {"dat": "hello", "date": 2, "Nr": "13", "stat": "bye"}
    ]
  ]
}

接下来在你的组件TS文件里开始处理：

1. 导入源JSON文件 #

Angular 12+默认支持直接导入JSON文件，在组件顶部直接引入就行：

import sourceData from './source-data.json';

2. 转换为扁平化的JavaScript数组 #

如果你需要把所有嵌套的对象提取成一个一维数组，两种方式都能实现：

export class YourComponent implements OnInit {
  flatDataArray: any[] = [];

  ngOnInit(): void {
    // 方式1：两层for循环遍历（直观易懂）
    for (const innerGroup of sourceData.data) {
      for (const item of innerGroup) {
        this.flatDataArray.push(item);
      }
    }

    // 方式2：用数组flat()方法更简洁（推荐）
    // this.flatDataArray = sourceData.data.flat();
  }
}

处理后flatDataArray会包含所有8个对象，完全扁平化，方便后续遍历或渲染。

3. 转换为Map（按特定字段分组） #

如果想按某个字段（比如Nr）分组存储，用Map就很合适：

export class YourComponent implements OnInit {
  groupedDataMap: Map<string, any[]> = new Map();

  ngOnInit(): void {
    // 遍历外层数组
    for (const innerGroup of sourceData.data) {
      // 遍历内层每个对象
      for (const item of innerGroup) {
        const groupKey = item.Nr;
        // 若Map中无该键，先初始化空数组
        if (!this.groupedDataMap.has(groupKey)) {
          this.groupedDataMap.set(groupKey, []);
        }
        // 将当前对象加入对应分组
        this.groupedDataMap.get(groupKey)?.push(item);
      }
    }

    // 测试：获取Nr为"11"的所有数据
    console.log(this.groupedDataMap.get("11"));
  }
}

这个Map的键是Nr的值（"11"和"13"），对应的值是同Nr的所有对象数组，非常适合按组查询数据。

额外小提示 #

• 如果你的源JSON是通过HTTP请求获取的，只需要把sourceData换成接口返回的数据即可，处理逻辑完全一致。
• 要是只需要提取特定字段，在循环里对item做筛选就行，比如：

  this.flatDataArray.push({ dat: item.dat, date: item.date });
  

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