在 Angular Javascript 中合并组合匹配对象的数组

Question

I have 2 array objects in Angular JS that I wish to merge (overlap/combine) the matching ones.

For example, the Array 1 is like this:

[
    {"id":1,"name":"Adam"},
    {"id":2,"name":"Smith"},
    {"id":3,"name":"Eve"},
    {"id":4,"name":"Gary"},
]

Array 2 is like this:

[
    {"id":1,"name":"Adam", "checked":true},
    {"id":3,"name":"Eve", "checked":true},
]

I want the resulting array after merging to become this:

[
    {"id":1,"name":"Adam", "checked":true},
    {"id":2,"name":"Smith"},
    {"id":3,"name":"Eve", "checked":true},
    {"id":4,"name":"Gary"},
]

Is that possible? I have tried angular's array_merge and array_extend like this:

angular.merge([], $scope.array1, $scope.array2);
angular.extend([], $scope.array1, $scope.array2);

But the above method overlap the first 2 objects in array and doesn't merge them based on matching data. Is having a foreach loop the only solution for this?

Can someone guide me here please?

Answer 1

Not sure if this find of merge is supported by AngularJS. I've made a snippet which does exactly the same:

 function merge(array1, array2) { var ids = []; var merge_obj = []; array1.map(function(ele) { if (!(ids.indexOf(ele.id) > -1)) { ids.push(ele.id); merge_obj.push(ele); } }); array2.map(function(ele) { var index = ids.indexOf(ele.id); if (!( index > -1)) { ids.push(ele.id); merge_obj.push(ele); }else{ merge_obj[index] = ele; } }); console.log(merge_obj); } var array1 = [{ "id": 1, "name": "Adam" }, { "id": 2, "name": "Smith" }, { "id": 3, "name": "Eve" }, { "id": 4, "name": "Gary" }, ] var array2 = [{ "id": 1, "name": "Adam", "checked": true }, { "id": 3, "name": "Eve", "checked": true }, ]; merge(array1, array2);

Answer 2

Genuinely, extend in Angular works with object instead of array. But we can do small trick in your case. Here is another solution.

// a1, a2 is your arrays
// This is to convert array to object with key is id and value is the array item itself
var a1_ = a1.reduce(function(obj, value) {
    obj[value.id] = value;
    return obj;
}, {});
var a2_ = a2.reduce(function(obj, value) {
    obj[value.id] = value;
    return obj;
}, {});
// Then use extend with those two converted objects
var result = angular.extend([], a1_, a2_).splice(1)

Notes:

• For compatibility, reduce may not work.
• The after array will replace the previous one. This is because of implementation of extend in Angular.