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

Question

i am calling two different service and getting difrent response. but i want to build one common table after arranging the response of both the service.

below is my service

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

i am getting below response in AdminData.

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

i am getting below response in 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"
    }   
  ]
};

Expected output

If i have AdminData then 'name': 'Admin', and need to prepare admin respnse. If i have ViewerData then 'name': 'Viewer', and need to prepare Viewer respnse.

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

Concat both `adminData` and `viewerData` to `rolesData`, how about **limit** and **start_offset**? Let say `adminData` has 5 items and `rolesData` has 6 items, based on `limit`, should it only show 5 items from `adminData` and 5 items from `rolesData`? I would suggest instead of doing this logic in the front-end, why not implement in the backend service that API to query & return data with different types that match your desired JSON output pattern. — Yong Shun, Jun 04 '21 at 07:45

N.F. · Accepted Answer · 2021-06-04T08:21:09.477

0

You can do it with 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;
  });
}

edited Jun 04 '21 at 08:21

answered Jun 04 '21 at 07:28

N.F.

3,844
3
22
53

Can u plz add how to create expected json.. it will be very helpful – Raj Jun 04 '21 at 07:36
But combineLatest is depreceated? – Raj Jun 04 '21 at 08:05
Array argument for `combineLatest` is not deprecated. This post is helpful. https://stackoverflow.com/questions/50276165/combinelatest-deprecated-in-favor-of-static-combinelatest – N.F. Jun 04 '21 at 08:26
I think that forkJoin is more closer you want, see: https://stackoverflow.com/questions/41797439/rxjs-observable-combinelatest-vs-observable-forkjoin – Eliseo Jun 04 '21 at 08:29

score 0 · Answer 2 · answered Jun 04 '21 at 08:00

0

CombineLatest is depreciated so using combineLatestWith instead

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

answered Jun 04 '21 at 08:00

Pranay Velisoju

31
4

Here combineLatestWith throws error Module '"rxjs"' has no exported member 'combineLatestWith'. – Raj Jun 04 '21 at 08:49
this operator is from the latest V7 which was released recently. Either you can upgrade which is not mandatory or you can use combineLatest. – Pranay Velisoju Jun 04 '21 at 16:11

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

2 Answers2