Объедините два JSON массива объектов, поступающих из разных служб Http в Angular 8

Question

Я занимаюсь разработкой нового angular 8 проекта, в котором в моем компоненте я получаю json данных от 2 разных сервисов. данные - это массив объектов. Я хочу объединить объекты в массиве и отправить его обратно в базу данных.

Вот код

import { Component , OnInit} from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
name = 'Angular';


// data comes from Persons Service
person = [
{name: "john", id: 1, joined: "2018"},
{name: "sarah", id: 2, joined: "2019"}
]

// data comes from salary Service
salary = [
{name: "john", id: 1, salary: 3000},
{name: "sarah", id: 2, salary: 5000}
]


personWithSalary;


ngOnInit(){

}


}

Как я могу объединить эти данные вместе и сопоставить зарплаты с правильным человеком поэтому он переходит в новый массив, например так:

personWithSalary = [
    {name: "john", id: 1, joined: "2018", salary: 3000},
    {name: "sarah", id: 2, joined: "2019", salary: 5000}
]

Answer 1

Вы можете использовать Карта коллекция, чтобы иметь O(1) при отображении person массив:

const uniqueSalaries = new Map(salary.map(s => [s.id, s]));
const result = person.map(({id, ...rest}) => ({...rest, ...uniqueSalaries.get(id)}));

Пример:

let person = [
    {name: "john", id: 1, joined: "2018"},
    {name: "sarah", id: 2, joined: "2019"}
]    
let  salary = [
    {name: "john", id: 1, salary: 3000},
    {name: "sarah", id: 2, salary: 5000}
];    

const uniqueSalaries = new Map(salary.map(s => [s.id, s]));
const result = person.map(({id, ...rest}) => ({...rest, ...uniqueSalaries.get(id)}));
console.log(result);

Answer 2

Вы можете использовать reduce и оператор распространения для объединения ваших массивов:

const personWithSalary = this.person.reduce((result,person) => {
      const salary = this.salaries.find(sal => sal.id === person.id);
      if(salary){
        result.push({...person,...salary});
      }
      return result;
},[])

Answer 3

    personWithSalary = person.map(p => {
        p['salary'] = salary.find(s =>s.name === p.name && s.id === p.id).salary;
        return p;
    })