如何在一个数组中合并两个 API 响应数组和 returns 数据 Angular 8

Question

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

以下是我的服务

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"
        }
      ]
    }
  ]
};

Answer 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;
  });
}

Answer 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))

如何在一个数组中合并两个 API 响应数组和 returns 数据 Angular 8

How to merge two API response array in one array and returns data Angular 8

javascript

angular

angular8