Combining objects in Angular Javascript by merging arrays

Question

Combining objects in Angular Javascript by merging arrays

How can I merge matching objects from 2 array objects in Angular JS?

Array 1:

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

Array 2:

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

Desired Resulting Array:

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

Is there a way to achieve this without a foreach loop?

I've attempted to use angular.merge and angular.extend but they overlap the first 2 objects instead of merging them based on matching data. Any guidance would be appreciated.

javascript arrays angularjs merge angularjs-scope

Answer 1

Answer №1

It's uncertain if AngularJS supports this type of merge. I've created a code snippet that achieves the same result:

function mergeArrays(array1, array2) {
    var ids = [];
    var mergedObjects = [];

    array1.map(function(element) {
        if (!(ids.indexOf(element.id) > -1)) {
            ids.push(element.id);
            mergedObjects.push(element);
        }
    });

    array2.map(function(element) {
    var index = ids.indexOf(element.id);
        if (!( index > -1)) {
            ids.push(element.id);
            mergedObjects.push(element);
        } else {
            mergedObjects[index] = element;
        }
    });

    console.log(mergedObjects);
}

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
}];

mergeArrays(array1, array2);

Answer 2

It's uncertain if AngularJS supports this type of merge. I've created a code snippet that achieves the same result:

function mergeArrays(array1, array2) {
    var ids = [];
    var mergedObjects = [];

    array1.map(function(element) {
        if (!(ids.indexOf(element.id) > -1)) {
            ids.push(element.id);
            mergedObjects.push(element);
        }
    });

    array2.map(function(element) {
    var index = ids.indexOf(element.id);
        if (!( index > -1)) {
            ids.push(element.id);
            mergedObjects.push(element);
        } else {
            mergedObjects[index] = element;
        }
    });

    console.log(mergedObjects);
}

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
}];

mergeArrays(array1, array2);

Answer 3

Answer №2

Essentially, when using extend in Angular, it typically works with objects rather than arrays. However, there is a workaround available for your specific situation. Here is an alternative solution:

// a1, a2 represent your arrays
// Convert arrays to objects with id as key and array item as value
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;
}, {});
// Utilize extend with the two converted objects
var result = angular.extend([], a1_, a2_).splice(1)

Important Points:

Keep in mind, the functionality of reduce may not be supported in all cases.
It is crucial to note that the subsequent array will overwrite the original one due to how extend is implemented in Angular.

Answer 4

Essentially, when using extend in Angular, it typically works with objects rather than arrays. However, there is a workaround available for your specific situation. Here is an alternative solution:

// a1, a2 represent your arrays
// Convert arrays to objects with id as key and array item as value
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;
}, {});
// Utilize extend with the two converted objects
var result = angular.extend([], a1_, a2_).splice(1)

Important Points:

Keep in mind, the functionality of reduce may not be supported in all cases.
It is crucial to note that the subsequent array will overwrite the original one due to how extend is implemented in Angular.

Combining objects in Angular Javascript by merging arrays

Answer №1

Answer №2

Similar questions

Troubles encountered when loading an Angular JS website using an Android Webview

Can we switch the country name to the database name in Jvector?

The collection-repeat feature in Ionic seems to be having trouble displaying in the specified location

Adjusting the slide display in angular-slick based on the window's width automatically

Determining if a value is an Object Literal in JavaScript: Tips for judging

Discovering similarities among array elements by looping through an array

Replacing all backslashes with forward slashes cannot be done using just one quotation mark; the process involves changing each ""

Angular version 1.6 with ES6, no errors in the application

Trying to locate the biggest value within an array is causing some issues

Manipulate the inner HTML of a ul element by targeting its li and a child elements using JQuery

Access the properties of a JSON object without specifying a key

a guide on using ajax to distribute retrieved data among various td elements

I have a collection of emails stored as a string that I would like to convert into a json or javascript object and store in a mongodb

Stop the continuous AJAX loop or look for an alternative method to retrieve and compare a list of HTML pages

How does one distinguish between the uses of "any" and "any[ ]"?

Guide on clicking an element within a hidden iframe using Python Selenium

In Angular 2, you can include a routerLink in a child component that directs to the root

I keep receiving multiple header errors from ExpressJS even though I am positive that I am only sending a single header

display in a modal-body and jdata

What is the reason behind VueJS animations only functioning in a single direction?