Combine two JSON Array of Objects Coming from Different Http Service in Angular 8

Question

I am developing a new angular 8 project where in my component, I get json data from 2 different services. the data is array of objects. I want to join the objects in the array and post it back to the database.

here is the code

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

}


}

How can I combine this data together and map the salaries to correct person so it goes into a new array like this:

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

It has the desired data but the first array will have more properties than the second array, I have just made up this data for guidance. — Chris
– Chris, Commented Feb 23, 2020 at 18:46

StepUp · Accepted Answer · 2020-02-23 18:51:01Z

1

You can use Map collection to have O(1) while mapping person array:

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

An example:

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

answered Feb 23, 2020 at 18:51

StepUp

38.5k16 gold badges95 silver badges159 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StepUp Over a year ago

@Chris I am glad that it helped to you:)

Max K · Accepted Answer · 2020-02-23 18:55:02Z

1

You could use reduce and the spread operator to merge your arrays:

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;
},[])

answered Feb 23, 2020 at 18:55

Max K

1,13110 silver badges12 bronze badges

Comments

ifelse.codes · Accepted Answer · 2020-02-23 18:50:56Z

0

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

answered Feb 23, 2020 at 18:50

ifelse.codes

2,38925 silver badges21 bronze badges

Collectives™ on Stack Overflow

Combine two JSON Array of Objects Coming from Different Http Service in Angular 8

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related