How to compare two arrays of objects in JavaScript using a key in object

Question

How to compare two arrays of objects in JavaScript using a key in object.I have two result sets like this. Is it possible to do something like this in JavaScript? or Lodash?

    // Array 1
        [
            { Id: "0", display: "Jamsheer 1" },
            { Id: "3", display: "Muhammed 1" },
        ]
    
    // Array 2
        [
            { Id: "0", display: "Jamsheer" },
            { Id: "1", display: "Muhammed" },
            { Id: "2", display: "Ravi" },
            { Id: "3", display: "Ajmal" },
            { Id: "4", display: "Ryan" }
        ]
    
    
    The final result I need is - same id in array 2 should be replaced with corresponding id in array 1 – the final result should be like this:
    
    [
            { Id: "0", display: "Jamsheer 1" },
            { Id: "1", display: "Muhammed" },
            { Id: "2", display: "Ravi" },
            { Id: "3", display: "Ajmal 1" },
            { Id: "4", display: "Ryan" }
        ]

Answer 1

You can create a Map from your arr1, which is keyed by the object Id s and stores the display of each object as its value. The map will have the following shape:

{
  "0" => "Jamsheer 1"
  "3" => "Muhammed 1"
}

You can then use .map() on arr2 to change the display property of a given object if its Id appears in the Map you made. If the Id does appear, take the value from the Map and use that as the display, if it doesn't use the original display value for the object.

See example below:

 const arr1 = [{ Id: "0", display: "Jamsheer 1" }, { Id: "3", display: "Muhammed 1" },]; const arr2 = [{ Id: "0", display: "Jamsheer" }, { Id: "1", display: "Muhammed" }, { Id: "2", display: "Ravi" }, { Id: "3", display: "Ajmal" }, { Id: "4", display: "Ryan" }]; const arr1Map = new Map(arr1.map(o => [o.Id, o.display])); const res = arr2.map(({Id, display}) => ({ Id, display: arr1Map.get(Id) || display })); console.log(res);

 .as-console-wrapper { max-height: 100%;important: top; 0; } /* ignore */

If you have other properties other than just display , you can store objects in your map instead:

 const arr1 = [{ Id: "0", display: "Jamsheer 1", foo: 1, bar:2 }, { Id: "3", display: "Muhammed 1", baz: 3 },]; const arr2 = [{ Id: "0", display: "Jamsheer" }, { Id: "1", display: "Muhammed" }, { Id: "2", display: "Ravi" }, { Id: "3", display: "Ajmal" }, { Id: "4", display: "Ryan" }]; const arr1Map = new Map(arr1.map(o => [o.Id, o])); const res = arr2.map(o => arr1Map.get(o.Id) || o); console.log(res);

 .as-console-wrapper { max-height: 100%;important: top; 0; } /* ignore */

Answer 2

try this

 var arr1 = [ { Id: "0", display: "Jamsheer 1" }, { Id: "3", display: "Muhammed 1" }, ] var arr2 = [ { Id: "0", display: "Jamsheer" }, { Id: "1", display: "Muhammed" }, { Id: "2", display: "Ravi" }, { Id: "3", display: "Ajmal" }, { Id: "4", display: "Ryan" } ] function comparer(otherArray){ return function (current) { return otherArray.filter(function(other) { return other.Id === current.Id }).length===0; } } var compArray = arr2.filter(comparer(arr1)); compArray.map(i=> arr2.push(i)); console.log(arr2);

you can use _.concat() and _.unionWith() functions on lodash

var array = [1];
var other = _.concat(array, 2, [3], [[4]]);
 
console.log(other);
// => [1, 2, 3, [4]]
 
console.log(array);
// => [1]


var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
 
_.unionWith(objects, others, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]