Angular 9及以上版本如何合并两个API数组结果？

问题说明 #

第一个API返回的数组数据：

[
  {name: 'ABC', state: 'AR', licenseNumber: '100108512'},
  {name: 'DEF', state: 'KY', licenseNumber: '100108518'}
]

第二个API返回的数组数据：

[
  {rollnum: '20', name: 'KGF', state: 'NE', licenseNumber: '1628740'}
]

需要合并两个数组，同时过滤掉第二个数组元素中多余的rollnum属性，得到如下结果：

[
  {name: 'ABC', state: 'AR', licenseNumber: '100108512'},
  {name: 'DEF', state: 'KY', licenseNumber: '100108518'},
  {name: 'KGF', state: 'NE', licenseNumber: '1628740'}
]

解决方案 #

1. 编写属性过滤工具函数 #

先实现一个函数，用来提取每个对象中需要保留的name、state、licenseNumber三个属性：

private filterLicenseItem(item: any): {name: string; state: string; licenseNumber: string} {
  return {
    name: item.name,
    state: item.state,
    licenseNumber: item.licenseNumber
  };
}

2. 处理数组并合并 #

对两个API返回的数组分别调用过滤函数，再用扩展语法或concat合并：

// 假设api1Result和api2Result是两个API返回的数组数据
const processedApi1 = api1Result.map(item => this.filterLicenseItem(item));
const processedApi2 = api2Result.map(item => this.filterLicenseItem(item));

// 方式1：扩展语法合并
const mergedData = [...processedApi1, ...processedApi2];

// 方式2：concat方法合并
const mergedData = processedApi1.concat(processedApi2);

3. 结合HTTP请求的完整实现 #

在Angular中通常通过HTTP获取API数据，可结合RxJS的forkJoin同时发起两个请求，再处理合并：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { forkJoin } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-license-merge',
  templateUrl: './license-merge.component.html'
})
export class LicenseMergeComponent implements OnInit {
  mergedLicenseData: {name: string; state: string; licenseNumber: string}[] = [];

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.mergeLicenseData();
  }

  private mergeLicenseData(): void {
    const api1$ = this.http.get<any[]>('https://your-first-api-url.com');
    const api2$ = this.http.get<any[]>('https://your-second-api-url.com');

    forkJoin([api1$, api2$]).pipe(
      map(([api1Data, api2Data]) => {
        const filterFn = (item: any) => ({
          name: item.name,
          state: item.state,
          licenseNumber: item.licenseNumber
        });
        return [...api1Data.map(filterFn), ...api2Data.map(filterFn)];
      })
    ).subscribe(data => {
      this.mergedLicenseData = data;
      console.log(this.mergedLicenseData); // 输出目标结果
    });
  }
}

问题原因说明 #

之前使用concat或扩展语法未得到期望结果，是因为这两种方式仅做数组的简单合并，不会自动过滤对象中的冗余属性。第二个API返回的元素包含额外的rollnum属性，必须先对每个元素做属性筛选，再合并数组才能得到目标格式。

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