如何在Angular中提取嵌套数组内的speakerID字段并存入新数组

前提说明 #

你提供的接口返回数据结构参考如下：

实现步骤 #

1. 声明存储变量 #

在对应组件类中声明用于存储所有speakerID的数组，字段类型根据你实际speakerID的格式调整：

// 如果是字符串类型
speakerIds: string[] = [];
// 如果是数值类型
// speakerIds: number[] = [];

2. 接口请求与数据提取 #

你可以直接在接口回调中处理嵌套数据，两种场景的处理代码如下：

场景1：已知固定嵌套层级

如果你已经明确JSON的嵌套结构，比如外层数组下每个元素的trans字段（对应你截图里的结构）下存储带speakerID的对象，直接用flatMap批量提取即可：

import { HttpClient } from '@angular/common/http';

// 组件类中注入HttpClient
constructor(private http: HttpClient) {}

getApiData() {
  // 替换为你的ASP.NET API实际请求地址
  this.http.get<any[]>('/api/你的接口路径').subscribe({
    next: (response) => {
      // 这里的item.trans对应你截图里的嵌套数组字段，替换为你实际的字段名即可
      this.speakerIds = response.flatMap(item => item.trans.map(transItem => transItem.speakerID));
    },
    error: (e) => console.error('接口请求出错：', e)
  })
}

场景2：嵌套层级不固定

如果JSON嵌套层级不确定，用递归遍历全量提取即可：

getApiData() {
  this.http.get<any[]>('/api/你的接口路径').subscribe({
    next: (response) => {
      // 递归提取方法
      const extractId = (dataList: any[]) => {
        dataList.forEach(item => {
          // 存在speakerID就存入数组
          if (item?.speakerID) {
            this.speakerIds.push(item.speakerID);
          }
          // 遍历所有属性，找到数组类型就递归处理
          Object.values(item).forEach(val => {
            if (Array.isArray(val)) {
              extractId(val);
            }
          })
        })
      }
      extractId(response);
    },
    error: (e) => console.error('接口请求出错：', e)
  })
}

注意事项 #

• 如果你的Angular项目编译配置不支持flatMap，可以替换为response.map(item => item.trans.map(t => t.speakerID)).flat()实现相同效果
• 实际开发中建议定义接口返回数据的TS类型，避免any类型带来的类型安全问题

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