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

In your final result, shouldn't your second last object be: { Id: "3", display: "Muhammed 1" } due to Array 1 having an object with id 3 and display of "Muhammed 1"? — Nick Parsons
– Nick Parsons, Commented Jul 20, 2020 at 7:25

Nick Parsons · Accepted Answer · 2020-07-20 09:00:11Z

You can create a Map from your arr1, which is keyed by the object Ids 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 */

dpmemcry · Accepted Answer · 2020-07-22 14:12:45Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related