Merge Arrays Combining Matching Objects in Angular Javascript

Question

608.48K viewsSeptember 10, 2022angularjs angularjs-scope arrays javascript merge

2

neel September 7, 2022 0 Comments

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?

2 Answers

score 1 · Answer 1 · 2022-09-08T01:44:37+00:00

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

score 1 · Answer 2 · 2022-09-08T01:05:06+00:00

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.