Angular项目：如何从HTTP响应的JSON数据中提取唯一分类？

我来帮你搞定这个重复分类的问题～这里有两种简单实用的方法，你可以根据自己的场景选择：

方案一：利用Set快速去重（最简单高效） #

这种方式利用JavaScript的Set数据结构天然去重的特性，搭配数组的map方法快速提取分类，代码简洁又高效。

修改组件代码 #

首先在组件里新增一个存储唯一分类的数组，然后在订阅API数据后处理：

export class FoodList implements OnInit{
  foodList: Food[] = [];
  // 新增：存储唯一分类的数组
  uniqueCategories: string[] = [];

  constructor(private foodS: FoodService){}

  ngOnInit(){
    this.foodS.getAll().subscribe(allfood => {
      this.foodList = allfood;
      // 提取并去重分类
      // 1. map提取所有category到新数组
      // 2. Set去重
      // 3. 展开成普通数组（转数组更适配*ngFor遍历）
      this.uniqueCategories = [...new Set(allfood.map(food => food.category))];
    });
  }
}

修改前端模板 #

把原来遍历foodDetails的逻辑改成遍历我们新生成的uniqueCategories：

<div class="list-group">
  <a href="#" class="list-group-item active"> All </a>
  <!-- 遍历唯一分类数组 -->
  <a href="#" class="list-group-item" *ngFor="let category of uniqueCategories">
    {{ category }}
  </a>
</div>

方案二：使用reduce手动去重（更灵活可控） #

如果你的分类可能存在空值、大小写不一致或者需要额外过滤逻辑，reduce方法会更灵活，能让你自定义去重规则：

修改组件中的处理逻辑 #

把方案一中的去重代码替换成下面的：

this.uniqueCategories = allfood.reduce((accumulator, currentFood) => {
  // 可以在这里加额外判断，比如过滤空分类、统一大小写等
  const category = currentFood.category?.trim(); // 去除首尾空格
  if (category && !accumulator.includes(category)) {
    accumulator.push(category);
  }
  return accumulator;
}, [] as string[]);

这个方法的好处是你可以在去重过程中加入各种自定义逻辑，比如把分类转成小写统一格式，或者跳过空的分类值。

注意事项 #

• 尽量在组件类中处理数据，不要在模板表达式里直接做去重逻辑，因为模板表达式会在每次变更检测时执行，频繁操作会影响性能。
• 如果你的API返回数据量很大，或者需要频繁刷新数据，可以考虑在服务层做去重，减少组件层的负担～

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