Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to find differences between two JavaScript arrays of objects?

I have two JavaScript arrays orig (the original array of objects) and update (the updated orig array of objects) that have the same length and contain objects, and I want to output the differences between the each pair of objects.

Example:

var orig = [{enabled:"true", name:"Obj1", id:3},{enabled:"true", name:"Obj2", id:4}]; 

var update = [{enabled:"true", name:"Obj1", id:3}, {enabled:"true", name:"Obj2-updated", id:4}];

The output should be: name:"Obj2-updated"

I implemented something but it needs optimization...

for(var prop=0; prop<orig.length; prop++) {
  for(prop=0; prop<update.length; prop++) {
    if(orig[prop].enabled != update.enabled) { console.log(update.enabled) }
    if(orig[prop].name != update[prop].name) { console.log(update[prop].name) }
    if(orig[prop].id != update[prop].id) { console.log(update[prop].id) }
  }
}
like image 442
Valip Avatar asked Aug 22 '16 08:08

Valip


People also ask

How will you differentiate between arrays and objects in JavaScript?

Both objects and arrays are considered “special” in JavaScript. Objects represent a special data type that is mutable and can be used to store a collection of data (rather than just a single value). Arrays are a special type of variable that is also mutable and can also be used to store a list of values.

How can we compare two objects in JavaScript?

isEqaul is property of lodash which is used to compare JavaScript objects. It is used to know whether two objects are same or not. For ex, there are two arrays with equal number of elements, properties and values are also same. Even the properties are not in same order it will return true.

Can you use == to compare arrays?

Using == on array will not give the desired result and it will compare them as objects.


3 Answers

You could filter the keys and get a result set with the updated keys.

var orig = [{ enabled: "true", name: "Obj1", id: 3 }, { enabled: "true", name: "Obj2", id: 4 }],
    update = [{ enabled: "true", name: "Obj1", id: 3 }, { enabled: "true", name: "Obj2-updated", id: 4 }],
    difference = [];

orig.forEach(function (a, i) {
    Object.keys(a).forEach(function (k) {
        if (a[k] !== update[i][k]) {
            difference.push({ id: update[i].id, key: k, value: update[i][k], index: i });
        }
    });
});

console.log(difference);
like image 65
Nina Scholz Avatar answered Oct 17 '22 23:10

Nina Scholz


Assuming, that the property names of both are identical and the values are just primitives (no objects, arrays etc.):

Object.keys( orig )
      .forEach( (key) => {
        if( orig[ key ] !== update[ key ] ) {
          console.log( update[key] );
        }
      });
like image 37
Sirko Avatar answered Oct 18 '22 01:10

Sirko


Use Object.keys to cycle through your object. Something like:

var orig = {
  enabled: "true",
  name: "Obj1",
  id: 3
};

var update = {
  enabled: "true",
  name: "Obj1-updated",
  id: 3
};

var diff = {};

Object.keys(orig).forEach(function(key) {
  if (orig[key] != update[key]) {
    diff[key] = update[key];
  };
})

console.log(diff);
like image 3
tewathia Avatar answered Oct 17 '22 23:10

tewathia