ES6 Merge two arrays (array contains another array inside) based on key Typescript or Javascript

Question

I want to merge two arrays both array contains another array inside. refer below two arrays.

const arr1=
[{"projectId":30278,"projectName":null,"details":[{"amount":"9097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"}]},{"projectId":37602,"projectName":null,"details":[{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"}]}]

const arr2= 
[{"projectId":30278,"projectName":null,"details":[{"amount":"8097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"}]},{"projectId":37602,"projectName":null,"details":[{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"}]}]

when i used ES6 spread operator, both values are appended to single array. But I want to merge based upon prjectId in that array.

So after merge, i need to get the result like below

const result =
 [{"projectId":30278,"projectName":null,"details":[{"amount":"9097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"},
{"amount":"8097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"}
]},
{"projectId":37602,"projectName":null,"details":[{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"},
{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"}
]}]

Possible duplicate of [How to merge two arrays in JavaScript and de-duplicate items](https://stackoverflow.com/questions/1584370/how-to-merge-two-arrays-in-javascript-and-de-duplicate-items) — Anshul Bansal, May 16 '19 at 11:34
@Anshul it is not duplicate question, it is a merge array inside arryay.provided solution in that link is not working — SivaRajini, May 16 '19 at 11:40

score 1 · Answer 1 · answered May 16 '19 at 11:38

const arr1=
[{"projectId":30278,"projectName":null,"details":[{"amount":"9097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"}]},{"projectId":37602,"projectName":null,"details":[{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"8234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"}]}]

const arr2= 
[{"projectId":30278,"projectName":null,"details":[{"amount":"8097457.11","currency":"USD","paymentDate":"2016-05-16T00:00:00"}]},{"projectId":37602,"projectName":null,"details":[{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-30T00:00:00"},{"amount":"7234743.0","currency":"USD","paymentDate":"2019-04-23T00:00:00"}]}]

var fullArray = [...arr1,...arr2];
var mergedData ={};
fullArray.forEach(function(data){
  if(mergedData[data.projectId]){
    mergedData[data.projectId]["details"] = mergedData[data.projectId]["details"].concat(data.details)
  } else {
  mergedData[data.projectId] = data;
  }
})
console.log(Object.values(mergedData))

score 0 · Answer 2 · answered May 16 '19 at 11:30

0

You can easily achieve that using Lodash unionBy function.

const result = _.unionBy(arr1, arr2, 'projectId')

answered May 16 '19 at 11:30

Arnaud Christ

3,440
3
24
33

can we achieve through plain javascript ? instead of custom script – SivaRajini May 16 '19 at 11:33
Lodash is an open source library, so feel free to copy their code if you don't want to use it directly. https://github.com/lodash/lodash/blob/master/unionBy.js – Arnaud Christ May 16 '19 at 11:34

score 0 · Answer 3 · answered May 16 '19 at 14:08

You can also try this in this case scenario.

let mergedArr = [];    
let projectIdsArr1 = arr1.map(item => item.projectId);    
arr2.map(outerLoopItem => { 
    if (projectIdsArr1.includes(outerLoopItem.projectId)) {
      let found = arr1.find(innerLoopItem => innerLoopItem.projectId === outerLoopItem.projectId);
      found.details = [...found.details, ...outerLoopItem.details];
      mergedArr.push(found);
    } else mergedArr.push(outerLoopItem);
});
console.log(mergedArr);

ES6 Merge two arrays (array contains another array inside) based on key Typescript or Javascript

3 Answers3