Merging Two Array of Objects in angular 6

Question

I have two arrays something like this.

array1 = [{name:'arjun', place:'mysore'},{name:'kanka', place:'bangalore'}];
array2 = [{name: 'arjun', degree:'BE'},{name:'kanka', degree:'MCA'}]

The result Should be Something like this.

array3 = [{name: 'arjun', place:'mysore', degree:'BE'}, {name:'kanka',place:'bangalore',degree:'MCA'}];

The above result Array doesn't have duplicate values now. Can anyone help please?

What have you tried so far? – Leonid Pyrlia Jul 11 '18 at 10:23 — Leonid Pyrlia, Jul 11 '18 at 10:23
Do arrays have the same length? Same order? – Yury Tarabanko Jul 11 '18 at 10:24 — Yury Tarabanko, Jul 11 '18 at 10:24

score 3 · Answer 1 · answered Jul 11 '18 at 10:26

Assuming that you need to merge arrays by index and are of same length.

let array1 = [{name:'arjun', place:'mysore'},{name:'kanka', place:'bangalore'}];
let array2 = [{name: 'arjun', degree:'BE'},{name:'kanka', degree:'MCA'}]

let array3 = array1.map((o,i) => ({...o, ...array2[i]}));
console.log(array3);

score 2 · Answer 2 · answered Jul 11 '18 at 10:26

You can simply use a Array.map() and Object.assign()

array1 = [{name:'arjun', place:'mysore'},{name:'kanka', place:'bangalore'}];
array2 = [{name: 'arjun', degree:'BE'},{name:'kanka', degree:'MCA'}];

let result = array1.map((a)=>{
 let obj2 = array2.find((b)=> a.name === b.name);
 if(obj2)
  Object.assign(a,obj2);
 return a;
});

console.log(result);

score 2 · Answer 3 · answered Jul 11 '18 at 10:29

I think you can use array#reduce to do something like this perhaps:

array1 = [{name:'arjun', place:'mysore'},{name:'kanka', place:'bangalore'}];
array2 = [{name: 'arjun', degree:'BE'},{name:'kanka', degree:'MCA'}]

var resultArray = array1.reduce((arr, e) => {
  arr.push(Object.assign({}, e, array2.find(a => a.name == e.name)))
  return arr;
}, [])


console.log(resultArray);

NOTE: It will also work if those arrays are of different length.

score 1 · Answer 4 · answered Jul 11 '18 at 10:26

use the foreach like this

let array1 = [{name:'arjun', place:'mysore'},{name:'kanka', place:'bangalore'}];
let array2 = [{name: 'arjun', degree:'BE'},{name:'kanka', degree:'MCA'}]


let array3 = [];

array1.forEach((item, index) => {
    array3.push(item)
    let degree = array2.find(e => e.name === item.name)
    if(degree){
      array3[index].degree = degree.degree
    }
})

console.log(array3)

score 1 · Answer 5 · answered Jul 11 '18 at 10:27

If both arrays are of the same length then this solution will work.

array1 = [{name:'arjun', place:'mysore'},{name:'kanka', place:'bangalore'}];
array2 = [{name: 'arjun', degree:'BE'},{name:'kanka', degree:'MCA'}]

const array3 = [];
for(let i=0; i < array1.length; i++){
    array3.push(Object.assign(array1[i], array2[i]));
}
console.log(array3);

Working JSBin here.

Look here also: How can I merge properties of two JavaScript objects dynamically?

score 1 · Answer 6 · answered Jul 11 '18 at 10:33

You can make an aggregation of properties by the name with reduce and map out the aggregated data to an array:

const array1 = [{name:'arjun', place:'mysore'},{name:'kanka', place:'bangalore'}];
const array2 = [{name: 'arjun', degree:'BE'},{name:'kanka', degree:'MCA'}];

const objData = [...array1, ...array2].reduce((all, { name, place, degree }) => {

    if (!all.hasOwnProperty(name)) all[name] = { name };
    if (place) all[name].place = place;
    if (degree) all[name].degree = degree;

    return all;

}, {});

const result = Object.keys(objData).map(k => objData[k]);

console.log(result);

Merging Two Array of Objects in angular 6

6 Answers6

Linked