Angular中无法获取多维数组元素，如何提取内部字段生成新数组？

一、为什么访问数组[0]返回undefined？ #

你的filterAndUpdate方法存在异步操作时序问题：

• this.http.get是异步请求，subscribe里的tap逻辑要等请求完成后才会执行，也就是this.response.push(bps)是异步触发的。
• 但方法最后直接同步返回this.response，此时请求还没完成，response数组是空的，访问[0]自然会得到undefined。

修复方案 #

不要直接返回同步的this.response，应该返回Observable，让调用方通过订阅获取数据：

filterAndUpdate<T>(url: string, entity: string): Observable<T[]> { 
    return this.filter<T>(encodeURI(url)) 
        .pipe( 
            map((res) => (res['_object'] ? res['_object'][entity] : [])),
            tap((bps) => {
              this.response.push(bps); // 保留原有缓存逻辑
            }) 
        );
}

调用示例：

this.yourService.filterAndUpdate(url, entity).subscribe(data => {
  console.log(data[0]); // 此处能正确获取第一个子数组
});

二、如何生成仅包含内部字段的新数组？ #

可以在map操作符中嵌套数组方法，提取目标字段。比如要提取id、firstname、uid：

filterAndUpdate<T>(url: string, entity: string): Observable<any[]> { 
    return this.filter<T>(encodeURI(url)) 
        .pipe( 
            map((res) => {
              const originalArray = res['_object'] ? res['_object'][entity] : [];
              // 提取内部字段生成新数组
              return originalArray.map(innerArray => 
                innerArray.map(item => ({
                  id: item.id,
                  firstname: item.firstname,
                  uid: item.uid
                }))
              );
            }),
            tap((processedData) => {
              this.response.push(processedData);
            }) 
        );
}

如果需要扁平化数组（直接得到所有内层对象的字段集合），可以改用flatMap：

return originalArray.flatMap(innerArray => 
  innerArray.map(item => ({
    id: item.id,
    firstname: item.firstname,
    uid: item.uid
  }))
);

额外提示 #

• 依赖全局数组this.response缓存数据时，要注意异步时序问题，优先通过Observable传递数据流，而非同步返回。
• 可以给泛型T定义具体接口，增强类型安全性，示例：

interface User {
  id: number;
  firstname: string;
  lastname: string;
  uid: string;
}

interface ApiResponse {
  _object: {
    [key: string]: User[][];
  };
}

// 调用时指定类型
this.filterAndUpdate<ApiResponse>(url, entity)...

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