如何用RxJS Observable过滤Angular HTTP服务获取的带子节点JSON

嘿，这个问题我熟！你拿到的是嵌套层级的分类数据，要用RxJS结合Angular HTTP来过滤的话，核心是把Observable流的处理和递归过滤嵌套结构结合起来，我给你一步步拆解：

首先要明确：Angular HTTP返回的是Observable<Category[]>，RxJS的filter操作符是用来过滤流中的值（比如如果你的请求会多次返回数据，过滤掉某些不符合的响应），但我们需要的是对响应里的数组数据进行过滤，所以应该用map操作符来转换数据——在map里我们可以对数组做任何处理，包括递归过滤嵌套的子节点。

先给你的JSON数据定义TypeScript接口，这样代码有类型提示，不容易写错：

interface Category {
  id: string;
  parentId: string | null;
  label: string;
  level: number;
  enabled: boolean;
  children: Category[];
}

因为你的数据是嵌套的，所以需要一个递归函数来遍历每个节点，检查是否符合过滤条件，同时处理它的子节点。比如先做一个最常见的需求：保留所有enabled: true的节点（包括子节点）：

private filterEnabledCategories(categories: Category[]): Category[] {
  // 1. 过滤当前层级的节点：只保留enabled为true的
  // 2. 对每个符合条件的节点，递归过滤它的children数组
  return categories
    .filter(category => category.enabled)
    .map(category => ({
      ...category, // 复制原节点的所有属性，避免修改原数据
      children: this.filterEnabledCategories(category.children) // 递归处理子节点
    }));
}

在你的Service里，用HttpClient获取数据，然后通过map操作符应用过滤函数：

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class CategoryService {
  constructor(private http: HttpClient) {}

  getEnabledCategories(): Observable<Category[]> {
    return this.http.get<Category[]>('/api/categories').pipe(
      // 用map转换响应数据，应用我们的过滤函数
      map(rawCategories => this.filterEnabledCategories(rawCategories))
    );
  }
}

如果需要更灵活的过滤（比如根据label关键词、level层级），可以把过滤条件作为参数传入递归函数。比如过滤label包含指定关键词且enabled为true的节点：

private filterCategoriesByKeyword(categories: Category[], keyword: string): Category[] {
  const lowerKeyword = keyword.toLowerCase();
  return categories
    .filter(category => 
      category.enabled && 
      category.label.toLowerCase().includes(lowerKeyword)
    )
    .map(category => ({
      ...category,
      children: this.filterCategoriesByKeyword(category.children, keyword)
    }));
}

// 在Service里添加对应的方法
getCategoriesByKeyword(keyword: string): Observable<Category[]> {
  return this.http.get<Category[]>('/api/categories').pipe(
    map(rawCategories => this.filterCategoriesByKeyword(rawCategories, keyword))
  );
}

最后在组件里订阅这个Observable，拿到过滤后的数据：

import { Component, OnInit } from '@angular/core';
import { CategoryService } from './category.service';
import { Category } from './category.model';

@Component({
  selector: 'app-category-tree',
  template: `
    <div *ngFor="let category of categories">
      <h3>{{ category.label }}</h3>
      <div *ngIf="category.children.length > 0" style="margin-left: 20px;">
        <app-category-tree [categories]="category.children"></app-category-tree>
      </div>
    </div>
  `
})
export class CategoryTreeComponent implements OnInit {
  categories: Category[] = [];

  constructor(private categoryService: CategoryService) {}

  ngOnInit(): void {
    // 获取所有enabled的分类
    this.categoryService.getEnabledCategories().subscribe(filtered => {
      this.categories = filtered;
    });

    // 或者按关键词过滤：比如找包含"Error"的分类
    // this.categoryService.getCategoriesByKeyword('Error').subscribe(filtered => {
    //   this.categories = filtered;
    // });
  }
}

• 别搞混RxJS的filter和数组的filter：RxJS的filter管的是“要不要保留这个响应”，数组的filter管的是“要不要保留数组里的这个元素”，这里我们用的是后者，所以要放在map操作符里处理。
• 递归处理子节点时，用扩展运算符...category返回新对象，保持数据不可变，避免意外修改原数据。

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