如何将两个API响应数组合并到一个数组中并返回数据Angular 8答案

【问题标题】：How to merge two API response array in one array and returns data Angular 8如何将两个API响应数组合并到一个数组中并返回数据Angular 8
【发布时间】：2021-08-22 06:09:05
【问题描述】：

我正在调用两个不同的服务并得到不同的响应。但我想在安排两个服务的响应后建立一个公用表。

以下是我的服务

getUsersForAdmin() {
    this.budgetaryUnitService.getUserList('Budget Administrator').subscribe(response => {
      this.adminData = response;
      this.getUsersForViewer();
    });
  }

   getUsersForViewer() {
    this.budgetaryUnitService.getUserList('Budget Viewer').subscribe(response => {
      viewerData = response;
      this.buildData(viewerData);
      this.buildRolesTable(response);
    });
  }



  buildData(this.adminData,viewerData){
    console.log(this.adminData,"Admindata");
    console.log(viewerData,"viewerData");
  }

我在 AdminData 中得到以下响应。

var adminData = {
  "limit": 10,
  "start_offset": 0,
  "size": 2,
  "response": [
    {
      "userid": "mabasore@us.ibm.com",
      "firstname": "Murphy",
      "lastname": "Basore",
      "userstatus": "Active"
    }
  ]
}

我在 viewerData 中得到以下响应。

var viewerData = {
  "limit": 10,
  "start_offset": 0,
  "size": 2,
  "response": [
    {
      "userid": "harinissb@us.ibm.com",
      "firstname": "H",
      "userstatus": "Active"
    },
    {
      "userid": "tarnold@us.ibm.com",
      "firstname": "Twana",
      "userstatus": "Active"
    }   
  ]
};

预期输出

如果我有 AdminData 然后是 'name': 'Admin'，并且需要准备管理员响应。如果我有 ViewerData 然后 'name': 'Viewer'，需要准备 Viewer 响应。

export const rolesData = {
  'limit': 10,
  'start_offset': 0,
  'result': [
    {
      'name': 'Admin',
      'response': [
        {
            "userid": "mabasore@us.ibm.com",
            "firstname": "Murphy",
            "lastname": "Basore",
            "userstatus": "Active"
        }
      ]
    },
    {
      'name': 'Viewer',
      'response': [
        {
            "userid": "harinissb@us.ibm.com",
            "firstname": "H",
            "userstatus": "Active"
        }
      ]
    }
  ]
};

【问题讨论】：

将adminData 和viewerData 连接到rolesData，limit 和start_offset 怎么样？假设adminData 有 5 个项目，rolesData 有 6 个项目，基于 limit，它是否应该只显示来自 adminData 的 5 个项目和来自 rolesData 的 5 个项目？我建议不要在前端执行此逻辑，为什么不在后端服务中实现 API 以查询和返回与您所需的 JSON 输出模式匹配的不同类型的数据。
我们暂时不需要限制和偏移...跳过这个

标签： javascript angular angular8

【解决方案1】：

你可以用combineLatest来做。

import { combineLatest } from 'rxjs';

getRolesData() {
  combineLatest([
    this.budgetaryUnitService.getUserList('Budget Administrator'),
    this.budgetaryUnitService.getUserList('Budget Viewer')
  ]).pipe(
    map(([adminData, viewerData]) => {
      const result = [];
      result.push(
        {
          name: 'Admin',
          response: adminData.response
        }
      );
      result.push(
        {
          name: 'Viewer',
          response: viewerData.response
        }
      );
      return {
        result
      };
    })
  ).subscribe( rolesData => {
    this.rolesData = rolesData;
  });
}

【讨论】：

你可以添加如何创建预期的 json.. 这将非常有帮助
但是 combineLatest 已被弃用？
combineLatest 的数组参数未被弃用。这篇文章很有帮助。 stackoverflow.com/questions/50276165/…
我认为 forkJoin 更接近你想要的，见：stackoverflow.com/questions/41797439/…

【解决方案2】：

CombineLatest 已贬值，因此请改用combineLatestWith

import { combineLatestWith } from 'rxjs';

combineLatestWith(
  this.budgetaryUnitService.getUserList('Budget Administrator'),
  this.budgetaryUnitService.getUserList('Budget Viewer')
).map(([adminData, viewerData]) => {
    return {
      result: [
        {name: 'Admin', response: adminData.response},
        { name: 'Viewer', response: viewerData.response}
      ]
    }
}).subscribe(data => console.log(data))

【讨论】：

这里 combineLatestWith 抛出错误模块 '"rxjs"' 没有导出的成员 'combineLatestWith'。
这个算子来自于最近发布的最新V7。您可以进行非强制升级，也可以使用 combineLatest。