Merging two requests when they match the same attribute value in angular-CodePudding

Lets say I have two JSON Outputs like this

[
  0: {id: "Robert"},
  1: {id: "Paul"},
  2: {id: "Anna"},
]

and

[
  0: {idName: "Robert", surname:"Anderson"},
  1: {idName: "Paul", surname:"Peters"},
  2: {idName: "Anna", surname:"Stark"},
]

I want to merge these two post calls into one, based on what id is called in the first one and if the values match to display the surname. How do I do that?

CodePudding user response：

You need to merge both array:

let arrayFirst = [{
    id: "Robert"
  },
  {
    id: "Paul"
  },
  {
    id: "Anna"
  },
]

let arraySecond = [{
    idName: "Robert",
    surname: "Anderson"
  },
  {
    idName: "Paul",
    surname: "Peters"
  },
  {
    idName: "Anna",
    surname: "Stark"
  },
]

let arrayMerged = arrayFirst.map((item, i) => Object.assign({}, item, arraySecond[i]));

console.log(arrayMerged);

to display the surname, you need to filter the merged array by id:

let mergedArray = [{
    "id": "Robert",
    "idName": "Robert",
    "surname": "Anderson"
  },
  {
    "id": "Paul",
    "idName": "Paul",
    "surname": "Peters"
  },
  {
    "id": "Anna",
    "idName": "Anna",
    "surname": "Stark"
  }
]

let givenId = "Anna";

const filteredArray = mergedArray.filter(item => item.id === givenId);
console.log(filteredArray);

when you get filtered array, you can bind the surname on html component as you wish.

CodePudding user response：

I'm not prety sure about your calls.

If you has two calls: getUsers() and getAllUsers(), as you want make two calls not relationated, you use forkJoin. As you want to transform this calls in only one you use map

forkJoin([this.dataService.getUsers(),this.dataService.getAllUsers()]).pipe(
  map(([users,allusers]:[any[],any[]])=>{

     //in users we have the response to getUsers()
     //in allusers we have the response to getAllUsers()

     users.forEach(x=>{
       
        //search the user in the array allUser
        const user=allusers.find(u=>u.idName==x.id);

        //add a new property
        x.surname=user?user.surname:null
     })
     return users
  }))

If you has a call to get the users getUsers() and each user call to another observable getUserId() to get the surname you need use switchMap. When you has the users transform the array of users in an array of observables and create a forkJoin with all the calls. Then use map to transform the value

this.dataService.getUsers().pipe(
    switchMap(users=>{

       //see how transform the array users in an array of observables
       return forkJoin(users.map(x=>this.dataService.getUserId(x.id))).pipe(
          map((usersData:any[])=>{

            //usersData is an array with the "data" of the users
            users.forEach((x:any,i:number)=>{
               x.surname=usersData[i].surname
            })
            return users
          }
       ))
    })
 )

You can see the two approach in this stackblitz

NOTE: in the stackblitz I use the async pipe to show the values. and the "dataService" use the rxjs operator of to create an observable -you should replace with the calls to your API