如何使用RxJS基于共同ID对两个JSON数组执行左连接

你当前代码的问题在于使用了Array.find()方法，它仅会返回第一个匹配id的地址项，而不是所有匹配项，导致每个员工只关联了第一条地址。要实现左连接并关联所有对应地址，需要改用Array.filter()来筛选出所有匹配ID的地址，再处理空结果的情况。

修正后的代码 #

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

let emp = of([
  { id: 1, name: 'aa', age: 20 },
  { id: 2, name: 'bb', age: 21 },
  { id: 3, name: 'cc', age: 22 },
  { id: 4, name: 'dd', age: 23 }
]);
let details = of([
  { id: 1, address: 'ee' },
  { id: 1, address: 'ff' },
  { id: 2, address: 'gg' },
  { id: 2, address: 'hh' }
]);

forkJoin([emp, details]).pipe(
  map(([_emp, _details]) =>
    _emp.map(item => {
      // 筛选当前员工所有匹配的地址
      const matchedDetails = _details.filter(detail => detail.id === item.id);
      return {
        ...item,
        // 如果没有匹配地址，设为undefined，否则返回地址数组
        details: matchedDetails.length > 0 ? matchedDetails : undefined
      };
    })
  )
).subscribe(console.log);

关键修改说明 #

• 替换Array.find()为Array.filter()：获取所有与当前员工ID匹配的地址项，而非仅第一个
• 添加空结果判断：当无匹配地址时，将details字段设为undefined，与预期输出完全对齐

运行结果 #

执行后将得到符合预期的左连接结果：

[
 {id: 1, name: 'aa', age: 20, details: [{address: 'ee'},{address: 'ff'}] },
 {id: 2, name: 'bb', age: 21, details: [{address: 'gg'},{address: 'hh'}] },
 {id: 3, name: 'cc', age: 22, details: undefined },
 {id: 4, name: 'dd', age: 23, details: undefined },
]

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