Efficiently and Effectively Comparing Two Arrays of Objects in JavaScript

Question

Efficiently and Effectively Comparing Two Arrays of Objects in JavaScript

Let's imagine we have 2 sets of data arrays, A (original) and B (updated).

var A = [ 
      { id: 1, value: 'Product Name 1' },
      { id: 2, value: 'Product Name 2' },
      { id: 3, value: 'Product Name 3' },
      { id: 4, value: 'Product Name 4' },
      { id: 5, value: 'Product Name 5' } 
]


var B = [ 
      { id: 1, value: 'Product Name 1' },
      { id: 2, value: 'Changed Name' },
      { value: 'New Product' }
]

The goal is to compare both arrays, identifying differences such as deleted items from array A that are not present in array B, edited items with changed 'value' property, and new items added without an id.

A logic for comparison can be summarized as follows (assuming each A and B are one element from their respective arrays)

If A.id == B.id and A.value !== B.value then it's an Edit
  
If B.id doesn't exist in A then it's a New item

If B.id is not found in A then it's Deleted

We need to create arrays for Added, Edited, and Deleted elements.

The expected result arrays would look like this:

Added = [ 
      { value: 'New Product'} 
]

Edited = [ 
      { id: 2, value: 'Changed Name' }
]

Deleted = [
      { id: 3, value: 'Product Name 3' },
      { id: 4, value: 'Product Name 4' },
      { id: 5, value: 'Product Name 5' } 
]

javascript arrays algorithm

Answer 1

Answer №1

To achieve this, you can utilize the filter method along with some. Here is an example implementation:

var arr1 = [
    { id: 1, value: 'Product Name 1' },
    { id: 2, value: 'Product Name 2' },
    { id: 3, value: 'Product Name 3' },
    { id: 4, value: 'Product Name 4' },
    { id: 5, value: 'Product Name 5' }
]

var arr2 = [
    { id: 1, value: 'Product Name 1' },
    { id: 2, value: 'Changed Name' },
    { value: 'New Product' }
]

var deletedItems = arr1.filter(function (item) {
    return !arr2.some(function (otherItem) { return otherItem.id === item.id })
})

var changedItems = arr1.filter(function (item) {
    return arr2.some(function (otherItem) { return (otherItem.id === item.id) && (otherItem.value !== item.value) })
})

var addedItems = arr2.filter(function (item) {
    return !arr1.some(function (otherItem) { return item.id === otherItem.id })
})

console.log(deletedItems);
console.log(changedItems);
console.log(addedItems);

If you want to retrieve B's elements in the changedItems array, simply swap the positions of arr1 and arr2 in that specific part of the code.

Answer 2

To achieve this, you can utilize the filter method along with some. Here is an example implementation:

var arr1 = [
    { id: 1, value: 'Product Name 1' },
    { id: 2, value: 'Product Name 2' },
    { id: 3, value: 'Product Name 3' },
    { id: 4, value: 'Product Name 4' },
    { id: 5, value: 'Product Name 5' }
]

var arr2 = [
    { id: 1, value: 'Product Name 1' },
    { id: 2, value: 'Changed Name' },
    { value: 'New Product' }
]

var deletedItems = arr1.filter(function (item) {
    return !arr2.some(function (otherItem) { return otherItem.id === item.id })
})

var changedItems = arr1.filter(function (item) {
    return arr2.some(function (otherItem) { return (otherItem.id === item.id) && (otherItem.value !== item.value) })
})

var addedItems = arr2.filter(function (item) {
    return !arr1.some(function (otherItem) { return item.id === otherItem.id })
})

console.log(deletedItems);
console.log(changedItems);
console.log(addedItems);

If you want to retrieve B's elements in the changedItems array, simply swap the positions of arr1 and arr2 in that specific part of the code.

Answer 3

Answer №2

If you're looking for a solution, here's an example using the utility library called lodash:

let newArray = _.cloneDeep(originalArray);
let removeArray = _.cloneDeep(arrayToRemove);
let modifiedArray = _.remove(newArray, function(item) {
    return _.some(removeArray, function(removeItem, index) {
        if (item.id === removeItem.id) {
            removeItem.splice(index, 1);
            return true;
        }
        return false;
    });
});

Answer 4

If you're looking for a solution, here's an example using the utility library called lodash:

let newArray = _.cloneDeep(originalArray);
let removeArray = _.cloneDeep(arrayToRemove);
let modifiedArray = _.remove(newArray, function(item) {
    return _.some(removeArray, function(removeItem, index) {
        if (item.id === removeItem.id) {
            removeItem.splice(index, 1);
            return true;
        }
        return false;
    });
});

Answer 5

Answer №3

To implement this logic, you can utilize the following code snippet:

var finalResult = [];
for(var i in arrayA) {
    var elementA = arrayA[i], j;
    for(j in arrayB) {
        var elementB = arrayB[j];
        if(elementB.id == elementA.id ) {
            finalResult.push(elementB);
            break;
        }
    }
    if(j == arrayB.length-1) 
        finalResult.push(elementA);
}

Answer 6

To implement this logic, you can utilize the following code snippet:

var finalResult = [];
for(var i in arrayA) {
    var elementA = arrayA[i], j;
    for(j in arrayB) {
        var elementB = arrayB[j];
        if(elementB.id == elementA.id ) {
            finalResult.push(elementB);
            break;
        }
    }
    if(j == arrayB.length-1) 
        finalResult.push(elementA);
}

Answer 7

Answer №4

.reduce() combined with .find() (ES6)

var finalResult = { new: [], edited: [], deleted: [] };

finalResult = B.reduce(function (l, r) {
    if (typeof r.id === "undefined") {
        l.new.push(r);
    } else {
        var elementInA = this.find(function (el) {
            return el.id === r.id;
        });

        if (typeof elementInA === "undefined") {
            l.deleted.push(r);
        } else if (elementInA.value !== r.value) {
            l.edited.push(r);
        }
    }

    return l;
}.bind(A), finalResult);    // .bind(A) is used to make the array <A> accessible as <this> in the reduce callback.
                           // Alternatively, A.find could also be used instead of this.find

console.log(finalResult);  // {"new":[{"value":"New Product"}],"edited":[{"id":2,"value":"Changed Name"}],"deleted":[]}

View fiddle

Answer 8

.reduce() combined with .find() (ES6)

var finalResult = { new: [], edited: [], deleted: [] };

finalResult = B.reduce(function (l, r) {
    if (typeof r.id === "undefined") {
        l.new.push(r);
    } else {
        var elementInA = this.find(function (el) {
            return el.id === r.id;
        });

        if (typeof elementInA === "undefined") {
            l.deleted.push(r);
        } else if (elementInA.value !== r.value) {
            l.edited.push(r);
        }
    }

    return l;
}.bind(A), finalResult);    // .bind(A) is used to make the array <A> accessible as <this> in the reduce callback.
                           // Alternatively, A.find could also be used instead of this.find

console.log(finalResult);  // {"new":[{"value":"New Product"}],"edited":[{"id":2,"value":"Changed Name"}],"deleted":[]}

View fiddle

Efficiently and Effectively Comparing Two Arrays of Objects in JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to upgrade Angular from version 10 to 12?

Unable to retrieve information obtained from MongoDB

Arranging arrays of objects based on their occurrence rate

Is there a way to retrieve the HTML raw code using backticks for string interpolation in JavaScript?

"Want to learn how to dynamically disable an input field in AngularJS when another field is selected? Find out how to achieve this using the

Updating the material-ui checkbox state to reflect the checked, unchecked, or indeterminate status, can be achieved in reactjs without relying on state

How to convert an Excel file into a two-dimensional array in Java using Apache POI

Encountered an error while attempting to convert react-native-reanimated-65-jsc.aar

Accordion elements that are active will move all other content on the page

Is there a way to transfer an image from background.js to background.html?

Handling events sequentially in RxJS

Have you ever wondered why the React HeroIcons architecture includes React.createElement instead of simply returning plain SVG elements?

Using Vue to handle Promise resolution - incorporating Laravel Gate logic into Vue

Having issues with the POST method in node.js and express when connecting to a MySQL database

Utilizing separate JavaScript files in Bootstrap 5: A guide to implementation

Effective Ways to Redirect During or After Executing the onClick Function of Button

browsing and extracting information from JSON datasets

Issue with closing in JavaScript code not functioning as expected

A TypeScript class transferring data to a different class

Errors during the compilation of Webgl shaders in the Google Chrome browser