Angular中如何仅订阅接口返回里category值为2的JSON数据

场景说明 #

对接接口返回结构为商品对象数组，现有代码直接将全量接口返回值赋值给实例属性，需要仅保留category: 2的数据项。

接口返回示例结构：

[
  {
    "id": 667,
    "image": "https://ae0g",
    "description": "GRE",
    "price": "USD .11",
    "buy": "https://sn",
    "category": 1
  },
  {
    "image": "https://ae04.",
    "description": "10/13 ",
    "price": ".18",
    "buy": "https://",
    "category": 2
  }
]

原有业务代码：

ngOnInit() {
  this.api.getApi()
  .subscribe(    
    data => this.todo=data 
  );
}

实现方式 #

你可以选择两种常用方式实现过滤，最终效果一致：

方式1：RxJS管道预处理（推荐） #

在数据流中提前完成数据过滤，逻辑更聚合，方便后续扩展其他数据处理操作：

1. 首先导入需要的RxJS操作符

import { map } from 'rxjs/operators';

2. 修改订阅逻辑，在pipe中加入数组过滤逻辑

ngOnInit() {
  this.api.getApi()
    .pipe(
      map((resList: any[]) => resList.filter(item => item.category === 2))
    )
    .subscribe(filteredList => {
      this.todo = filteredList;
    });
}

方式2：订阅回调内过滤 #

逻辑更直白，不需要额外导入操作符，适合简单场景：

ngOnInit() {
  this.api.getApi()
    .subscribe(resList => {
      this.todo = resList.filter(item => item.category === 2);
    });
}

注意事项 #

• 如果后续为接口返回定义了明确的TypeScript接口，将代码中的any[]替换为对应接口类型即可获得完整类型提示
• 如果接口返回的category字段是字符串格式的"2"，需要将判断条件调整为item.category === '2'，避免严格等于模式下类型不匹配导致过滤结果为空

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