RxJS如何递归合并两个嵌套observable并按parentId关联父子数据

问题原因 #

你的代码存在三个核心错误：

1. 处理parents$发出的父数组时，你用map把每个父对象转换成了forkJoin Observable，但没有对这些Observable做合并订阅，导致下游拿到的都是未订阅的Observable实例，就是你现在打印的结果。
2. getChild$方法逻辑错误：你用c.map(child => child.parentId === parentId)返回的是布尔值数组，不是匹配的子对象，也没有过滤不匹配的项。
3. 没有把匹配到的子对象挂载到父对象的children属性上，也没有把处理完成的所有父对象重新合并成完整数组返回。

修复后可运行代码 #

import { of, forkJoin, Observable } from 'rxjs';
import { mergeMap, map } from 'rxjs/operators';

// 类型定义（如果你的项目未提前定义可以加上）
interface ChildItem {
  itemId: number;
  itemName: string;
}
interface Child {
  parentId: number;
  childName: string;
  childData: ChildItem[];
}
interface Parent {
  parentName: string;
  parentId: number;
  children: Child[];
}

const parents$: Observable<Parent[]> = of([
  { parentName: 'a', parentId: 0, children: [] },
  { parentName: 'b', parentId: 1, children: [] },
  { parentName: 'c', parentId: 2, children: [] },
]);

const children$: Observable<Child[]> = of([
  {
    parentId: 0,
    childName: 'a-a',
    childData: [
      { itemId: 0, itemName: 'd' },
      { itemId: 1, itemName: 'e' }
    ]
  },
  {
    parentId: 2,
    childName: 'a-b',
    childData: [
      { itemId: 0, itemName: 'f' },
      { itemId: 1, itemName: 'g' }
    ]
  }
]);

class AttachChildren {
  tesCollection() {
    parents$
      .pipe(
        // 批量处理所有父对象，等待所有子查询完成
        mergeMap(parents => 
          forkJoin(
            parents.map(parent => 
              // 为每个父对象查询匹配的子数据
              this.getChild$(parent.parentId).pipe(
                map(matchedChildren => {
                  // 将子数据挂载到对应父对象的children字段
                  parent.children = matchedChildren;
                  return parent;
                })
              )
            )
          )
        )
      )
      .subscribe((processedParents: Parent[]) => {
        console.log('关联完成的父子数据集:', processedParents);
      });
  }

  // 修复子数据查询方法：返回匹配当前parentId的所有子对象数组
  getChild$(parentId: number): Observable<Child[]> {
    return children$.pipe(
      map(children => children.filter(child => child.parentId === parentId))
    );
  }
}

// 执行测试
new AttachChildren().tesCollection();

运行输出 #

你会得到预期的关联结果：

关联完成的父子数据集: [
  { parentName: 'a', parentId: 0, children: [ [Object] ] },
  { parentName: 'b', parentId: 1, children: [] },
  { parentName: 'c', parentId: 2, children: [ [Object] ] }
]

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