Angular中如何提取borough数组并按id排序、前置过滤？

一、组件内直接处理（适合简单场景） #

修改HTTP请求的订阅逻辑，在获取数据后一次性完成提取、排序和过滤：

this.http.get(this.datajson).subscribe(all_data => {
  // 安全提取borough数组，用可选链避免层级缺失报错
  const boroughs = all_data?.country?.state?.[0]?.city?.[0]?.nest_1?.nest_2?.borough || [];
  
  // 按id升序排序，创建数组副本避免修改原数据
  const sortedBoroughs = [...boroughs].sort((a, b) => a.id - b.id);
  
  // 自定义过滤规则：示例保留id大于2的项
  this.processedBoroughs = sortedBoroughs.filter(item => item.id > 2);
});

在HTML中渲染处理后的数组：

<div *ngFor="let item of processedBoroughs">
  ID: {{ item.id }}
</div>

二、使用Angular管道（适合复用/动态场景） #

如果需要在多组件复用逻辑，或过滤条件需动态调整，推荐使用管道：

1. 创建排序管道

// sort-by-id.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'sortById' })
export class SortByIdPipe implements PipeTransform {
  transform(items: any[]): any[] {
    if (!items?.length) return [];
    // 返回新数组，避免修改原始数据
    return [...items].sort((a, b) => a.id - b.id);
  }
}

2. 创建过滤管道（示例：按最小ID过滤）

// filter-by-min-id.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'filterByMinId' })
export class FilterByMinIdPipe implements PipeTransform {
  transform(items: any[], minId: number): any[] {
    if (!items?.length) return [];
    return items.filter(item => item.id > minId);
  }
}

3. 组件内提取原始数组

this.http.get(this.datajson).subscribe(all_data => {
  this.boroughs = all_data?.country?.state?.[0]?.city?.[0]?.nest_1?.nest_2?.borough || [];
});

4. HTML中组合管道使用

<!-- 若需动态过滤，可把2换成组件变量如filterMinId -->
<div *ngFor="let item of boroughs | sortById | filterByMinId: 2">
  ID: {{ item.id }}
</div>

注意事项 #

• 用**可选链?.**避免数据层级缺失导致的报错；
• 排序时创建数组副本，防止修改原始数据引发意外；
• 复杂过滤规则可在管道中扩展，或组件内预处理后再传入管道。

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