How to merge multiple array of object by ID in javascript?
Solution 1:
With lodash, a lot more readable I think.
var arr1 = [{"memberID":"81fs","RatingCW":4.5},{"memberID":"80fs","RatingCW":4},{"memberID":"82fs","RatingCW":5},{"memberID":"83fs","RatingCW":3},{"memberID":"84fs","RatingCW":4.7}],
arr2 = [{"memberID":"80fs","ratingWW":4},{"memberID":"81fs","ratingWW":4.5},{"memberID":"83fs","ratingWW":3},{"memberID":"82fs","ratingWW":5},{"memberID":"84fs","ratingWW":3.5}],
arr3 = [{"memberID":"80fs","incoCW":4},{"memberID":"81fs","incoCW":4.5},{"memberID":"82fs","incoCW":5},{"memberID":"83fs","incoCW":3},{"memberID":"84fs","incoCW":4.5}],
arr4 = [{"memberID":"80fs","incoWW":3},{"memberID":"81fs","incoWW":2.5},{"memberID":"82fs","incoWW":5},{"memberID":"83fs","incoWW":3},{"memberID":"84fs","incoWW":6.5}];
var merged = _(arr1)
.concat(arr2, arr3, arr4)
.groupBy("memberID")
.map(_.spread(_.merge))
.value();
console.log(merged);<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>Here is the codepen: http://codepen.io/kuhnroyal/pen/Wxzdmw
Solution 2:
Here's some steps using lodash:
- Put all objects into an array (_.flatten then _.groupby)
- Flatten 2d array into 1d array of 'user' obj (_.map then _.merge and apply to pass in array as arg)
var arr1 =[
{ memberID : "81fs", RatingCW:4.5},
{ memberID : "80fs", RatingCW:4},
{ memberID : "82fs", RatingCW:5 },
{ memberID : "83fs", RatingCW:3},
{ memberID : "84fs", RatingCW:4.7}
];
var arr2 =[
{ memberID : "80fs", ratingWW: 4},
{ memberID : "81fs", ratingWW: 4.5},
{ memberID : "83fs", ratingWW: 3},
{ memberID : "82fs", ratingWW: 5},
{ memberID : "84fs", ratingWW: 3.5}
];
var arr3 = [
{ memberID : "80fs", incoCW:4},
{ memberID : "81fs", incoCW:4.5},
{ memberID : "82fs", incoCW:5},
{ memberID : "83fs", incoCW:3},
{ memberID : "84fs", incoCW:4.5}
];
var arr4 = [
{ memberID : "80fs", incoWW:3},
{ memberID : "81fs", incoWW:2.5 },
{ memberID : "82fs", incoWW:5 },
{ memberID : "83fs", incoWW:3 },
{ memberID : "84fs", incoWW:6.5 }
];
var a = _.groupBy(_.flatten([arr1,arr2,arr3,arr4]), 'memberID');
var b = _.map(a, function(val){ return _.merge.apply(_,val) });
console.log(b);<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js"></script>Solution 3:
Pure JS way,it's a tough one,took hours to get it.
var arr1 = [{"memberID":"81fs","RatingCW":4.5},{"memberID":"80fs","RatingCW":4},{"memberID":"82fs","RatingCW":5},{"memberID":"83fs","RatingCW":3},{"memberID":"84fs","RatingCW":4.7}],
arr2 = [{"memberID":"80fs","ratingWW":4},{"memberID":"81fs","ratingWW":4.5},{"memberID":"83fs","ratingWW":3},{"memberID":"82fs","ratingWW":5},{"memberID":"84fs","ratingWW":3.5}],
arr3 = [{"memberID":"80fs","incoCW":4},{"memberID":"81fs","incoCW":4.5},{"memberID":"82fs","incoCW":5},{"memberID":"83fs","incoCW":3},{"memberID":"84fs","incoCW":4.5}],
arr4 = [{"memberID":"80fs","incoWW":3},{"memberID":"81fs","incoWW":2.5},{"memberID":"82fs","incoWW":5},{"memberID":"83fs","incoWW":3},{"memberID":"84fs","incoWW":6.5}];
const arrs=[...arr1,...arr2,...arr3,...arr4];
const noDuplicate=arr=>[...new Set(arr)]
const allIds=arrs.map(ele=>ele.memberID);
const ids=noDuplicate(allIds);
const result=ids.map(id=>
arrs.reduce((self,item)=>{
return item.memberID===id?
{...self,...item} : self
},{})
)
console.log(result);Solution 4:
arr1.map(a =>
Object.assign({},a,
arr2.find(b => b.memberID === a.memberID),
arr3.find(c => c.memberID === a.memberID),
arr4.find(d => d.memberID === a.memberID)
)
)
Here is the simplest code ... this is basically a oneliner solution. The performance may not be the best but works well for a small data sets.