How to do a deep comparison between 2 objects with lodash

Question

I have 2 nested objects which are different and I need to know if they have difference in one of their nested properties   var a       var b        a prop1   2  a prop2     prop3  2     b prop1   2  b prop2     prop3  3      The object could be much more complex with more nested properties  But this one is a good example  I have the option to use recursive functions or something with lodash

User · Answer

I need to know if they have difference in one of their nested properties

Other answers provide potentially satisfactory solutions to this problem, but it is sufficiently difficult and common that it looks like there's a very popular package to help solve this issue deep-object-diff.

To use this package you'd need to npm i deep-object-diff then:

const { diff } = require('deep-object-diff');
var a = {};
var b = {};

a.prop1 = 2;
a.prop2 = { prop3: 2 };

b.prop1 = 2;
b.prop2 = { prop3: 3 };

if (!_.isEqual(a, b)) {
  const abDiff = diff(a, b);
  console.log(abDiff);
  /*
  {
    prop2: {
      prop3: 3
    }
  }
  */
}

// or alternatively
const abDiff = diff(a, b);
if(!_.isEmpty(abDiff)) {
  // if a diff exists then they aren't deeply equal
  // perform needed actions with diff...
}

Here's a more detailed case with property deletions directly from their docs:

const lhs = {
  foo: {
    bar: {
      a: ['a', 'b'],
      b: 2,
      c: ['x', 'y'],
      e: 100 // deleted
    }
  },
  buzz: 'world'
};

const rhs = {
  foo: {
    bar: {
      a: ['a'], // index 1 ('b')  deleted
      b: 2, // unchanged
      c: ['x', 'y', 'z'], // 'z' added
      d: 'Hello, world!' // added
    }
  },
  buzz: 'fizz' // updated
};

console.log(diff(lhs, rhs)); // =>
/*
{
  foo: {
    bar: {
      a: {
        '1': undefined
      },
      c: {
        '2': 'z'
      },
      d: 'Hello, world!',
      e: undefined
    }
  },
  buzz: 'fizz'
}
*/

For implementation details and other usage info, refer to that repo.

User · Answer

For anyone stumbling upon this thread  here s a more complete solution  It will compare two objects and give you the key of all properties that are either only in object1  only in object2  or are both in object1 and object2 but have different values         Compare two objects by reducing an array of keys in obj1  having the    keys in obj2 as the intial value of the result  Key points        - All keys of obj2 are initially in the result        - If the loop finds a key  from obj1  remember  not in obj2  it adds      it to the result        - If the loop finds a key that are both in obj1 and obj2  it compares      the value  If it s the same value  the key is removed from the result      function getObjectDiff obj1  obj2        const diff   Object keys obj1  reduce  result  key    gt            if   obj2 hasOwnProperty key                 result push key             else if    isEqual obj1 key   obj2 key                  const resultKeyIndex   result indexOf key               result splice resultKeyIndex  1                     return result         Object keys obj2         return diff      Here s an example output      Test let obj1         a  1      b  2      c    foo  1  bar  2       d    baz  1  bat  2      let obj2         b  2       c    foo  1  bar   monkey         d    baz  1  bat  2       e  1   getObjectDiff obj1  obj2       c    e    a     If you don t care about nested objects and want to skip lodash  you can substitute the   isEqual for a normal value comparison  e g  obj1 key      obj2 key

User · Answer

An easy and elegant solution is to use   isEqual  which performs a deep comparison   x000D   x000D  var a       var b        a prop1   2  a prop2     prop3  2     b prop1   2  b prop2     prop3  3     console log   isEqual a  b       returns false if different x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 4 lodash min js  gt  lt  script gt  x000D   x000D   x000D   However  this solution doesn t show which property is different

User · Answer

Without use of lodash underscore  I have written this code and is working fine for me for a deep comparison of object1 with object2  function getObjectDiff a  b        var diffObj           if  Array isArray a             a forEach function elem  index                if   Array isArray diffObj                     diffObj                                 diffObj index    getObjectDiff elem   b        index                      else if  a    null  amp  amp  typeof a     object             Object keys a  forEach function key                if  Array isArray a key                      var arr   getObjectDiff a key   b key                    if   Array isArray arr                         arr                                         arr forEach function elem  index                        if   Array isArray diffObj key                              diffObj key                                                  diffObj key  index    elem                                    else if  typeof a key      object                     diffObj key    getObjectDiff a key   b key                  else if  a key      b        key                     diffObj key    a key                 else if  a key      b        key                     delete a key                                       Object keys diffObj  forEach function key            if  typeof diffObj key      object   amp  amp  JSON stringify diffObj key                          delete diffObj key                         return diffObj

User · Answer

This is my solution to the problem const     require  lodash     var objects       x   1   y   2   z  3  a  b 1  c 2  d  n 0    p  1  2  3         x   2   y   1  z 3  a  b 2  c 2 d  n 1    p  1 3   m 3       const diffFn  a b  path      gt   reduce a  function result  value  key         if   isObjectLike value          if   isEqual value  b key             return result         else   return result concat diffFn value  b key   path     path    key    key                else  return   isEqual value  b key             result   result concat path     path    key    key                       const diffKeys1 diffFn objects 0   objects 1   const diffKeys2 diffFn objects 1   objects 0   const diffKeys   union diffKeys1  diffKeys2  const res        forEach diffKeys   key   gt   assign res    key    old    get objects 0   key   new   get objects 1   key        res    Returns     x    old  1  new  2      y    old  2  new  1       a b     old  1  new  2       a d n     old  0  new  1       p 1     old  2  new  3       p 2     old  3  new  undefined      m    old  undefined  new  3

User · Answer

this was based on  JLavoie  using lodash  let differences   function  newObj  oldObj          return   reduce newObj  function  result  value  key            if     isEqual value  oldObj key                if    isArray value                 result key                     forEach value  function  innerObjFrom1  index                  if    isNil oldObj key  index                      result key  push innerObjFrom1                  else                   let changes   differences innerObjFrom1  oldObj key  index                   if     isEmpty changes                       result key  push changes                                                               else if    isObject value                 result key    differences value  oldObj key               else               result key    value                               return result                      https   jsfiddle net EmilianoBarboza 0g0sn3b9 8

User · Answer

Here is a simple Typescript with Lodash deep difference checker which will produce a new object with just the differences between an old object and a new object   For example  if we had   const oldData    a  1  b  2   const newData    a  1  b  3     the resulting object would be   const result   b  3     It is also compatible with multi-level deep objects  for arrays it may need some tweaking   import   as   from  lodash    export const objectDeepDiff    data  object   any  oldData  object   any    gt      const record  any         Object keys data  forEach  key  string    gt           Checks that isn t an object and isn t equal     if    typeof data key       object   amp  amp    isEqual data key   oldData key             record key    data key                If is an object  and the object isn t equal     if   typeof data key       object   amp  amp     isEqual data key   oldData key             record key    objectDeepDiff data key   oldData key                  return record

User · Answer

Deep compare using a template of  nested  properties to check  function objetcsDeepEqualByTemplate objectA  objectB  comparisonTemplate      if   objectA     objectB  return false    let areDifferent   false   Object keys comparisonTemplate  some  key    gt        if  typeof comparisonTemplate key       object           areDifferent    objetcsDeepEqualByTemplate objectA key   objectB key   comparisonTemplate key         return areDifferent       else if  comparisonTemplate key      true          areDifferent   objectA key      objectB key        return areDifferent       else         return false               return  areDifferent    const objA        a  1    b        a  21      b  22         c  3     const objB        a  1    b        a  21      b  25         c  true        template tells which props to compare const comparisonTemplateA       a  true    b        a  true       objetcsDeepEqualByTemplate objA  objB  comparisonTemplateA     returns true  const comparisonTemplateB       a  true    c  true      returns false objetcsDeepEqualByTemplate objA  objB  comparisonTemplateB    This will work in the console  Array support could be added if needed

User · Answer

To recursively show how an object is different with other you can use   reduce combined with   isEqual and   isPlainObject  In this case you can compare how a is different with b or how b is different with a    x000D   x000D  var a    prop1   prop1 1   text 1   prop1 2   text 2   prop1 3   1  2  3    prop2  2  prop3  3   x000D  var b    prop1   prop1 1   text 1   prop1 3   1  2    prop2  2  prop3  4   x000D   x000D  var diff   function obj1  obj2    x000D    return   reduce obj1  function result  value  key    x000D      if    isPlainObject value     x000D        result key    diff value  obj2 key    x000D        else if     isEqual value  obj2 key      x000D        result key    value  x000D        x000D      return result  x000D            x000D     x000D   x000D  var res1   diff a  b   x000D  var res2   diff b  a   x000D  console log res1   x000D  console log res2   x000D   lt script src  https   cdn jsdelivr net npm lodash 4 17 4 lodash min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Simple use   isEqual method  it will work for all comparing           Note  This method supports comparing arrays  array buffers    booleans           date objects  error objects  maps  numbers  Object objects  regexes           sets  strings  symbols  and typed arrays  Object objects are compared          by their own  not inherited  enumerable properties  Functions and DOM          nodes are not supported       So if you have below    const firstName    name   Alireza     const otherName    name   Alireza      If you do     isEqual firstName  otherName      it will return true  And if const fullName    firstName   Alireza   familyName   Dezfoolian     If you do     isEqual firstName  fullName     will return false

User · Answer

This code returns an object with all properties that have a different value and also values of both objects  Useful to logging the difference   var allkeys     union   keys obj1     keys obj2    var difference     reduce allkeys  function  result  key      if      isEqual obj1 key   obj2 key           result key     obj1  obj1 key   obj2  obj2 key         return result

User · Answer

If you need only key comparison      reduce a  function result  value  key         return b key      undefined   key

User · Answer

As it was asked  here s a recursive object comparison function  And a bit more  Assuming that primary use of such function is object inspection  I have something to say  Complete deep comparison is a bad idea when some differences are irrelevant  For example  blind deep comparison in TDD assertions makes tests unnecessary brittle  For that reason  I d like to introduce a much more valuable partial diff  It is a recursive analogue of a previous contribution to this thread  It ignores keys not present in a  var bdiff    a  b    gt        reduce a   res  val  key    gt          res concat    isPlainObject val       isArray val    amp  amp  b               bdiff val  b key   map x   gt  key         x                   b    val    b key     key                         BDiff allows checking for expected values while tolerating other properties  which is exactly what you want for automatic inspection  This allows building all kinds of advanced assertions  For example   var diff   bdiff expected  actual      all expected properties match console assert diff length    0   Objects differ   diff  expected  actual      controlled inequality console assert diff length  lt  3   Too many differences   diff  expected  actual     Returning to the complete solution  Building a full traditional diff with bdiff is trivial    function diff a  b        var u   bdiff a  b   v   bdiff b  a       return u filter x  gt  v includes x   map x  gt    lt      x       concat u filter x  gt v includes x   map x  gt         x        concat v filter x  gt  u includes x   map x  gt    gt      x         Running above function on two complex objects will output something similar to this           lt  components 0 components 1 components 1 isNew        lt  components 0 cryptoKey         components 0 components 2 components 2 components 2 FFT min         components 0 components 2 components 2 components 2 FFT max        gt  components 0 components 1 components 1 merkleTree        gt  components 0 components 2 components 2 components 2 merkleTree        gt  components 0 components 3 FFTResult       Finally  in order to have a glimpse into how the values differ  we may want to directly eval   the diff output  For that  we need an uglier version of bdiff that outputs syntactically correct paths      provides syntactically correct output var bdiff    a  b    gt        reduce a   res  val  key    gt          res concat    isPlainObject val       isArray val    amp  amp  b               bdiff val  b key   map x   gt                   key    key trim              x search    d               x                  b    val    b key     key    key trim                                     now we can eval output of the diff fuction that we left unchanged diff a  b  filter x  gt x 1          map x  gt  x  concat  a  b  map y  gt   z    gt eval  z     x substr 3    call this  y         That will output something similar to this        components 0  components 2  components 2  components 2  FFT min   0  3       components 0  components 2  components 2  components 2  FFT max   100  50    MIT license

User · Answer

Based on the answer by Adam Boduch  I wrote this function which compares two objects in the deepest possible sense  returning paths that have different values as well as paths missing from one or the other object   The code was not written with efficiency in mind  and improvements in that regard are most welcome  but here is the basic form   var compare   function  a  b       var result         different          missing from first          missing from second               reduce a  function  result  value  key        if  b hasOwnProperty key           if    isEqual value  b key              return result          else           if  typeof  a key      typeof         typeof  b key      typeof                     dead end            result different push key             return result            else             var deeper   compare a key   b key              result different   result different concat   map deeper different   sub path    gt                return key         sub path                            result missing from second   result missing from second concat   map deeper missing from second   sub path    gt                return key         sub path                            result missing from first   result missing from first concat   map deeper missing from first   sub path    gt                return key         sub path                           return result                          else         result missing from second push key         return result             result        reduce b  function  result  value  key        if  a hasOwnProperty key           return result        else         result missing from first push key         return result             result      return result      You can try the code using this snippet  running in full page mode is recommended     x000D   x000D  var compare   function  a  b    x000D   x000D    var result     x000D      different      x000D      missing from first      x000D      missing from second     x000D       x000D   x000D      reduce a  function  result  value  key    x000D      if  b hasOwnProperty key     x000D        if    isEqual value  b key      x000D          return result  x000D          else   x000D          if  typeof  a key      typeof         typeof  b key      typeof         x000D              dead end  x000D            result different push key   x000D            return result  x000D            else   x000D            var deeper   compare a key   b key    x000D            result different   result different concat   map deeper different   sub path    gt    x000D              return key         sub path  x000D                 x000D   x000D            result missing from second   result missing from second concat   map deeper missing from second   sub path    gt    x000D              return key         sub path  x000D                 x000D   x000D            result missing from first   result missing from first concat   map deeper missing from first   sub path    gt    x000D              return key         sub path  x000D                 x000D            return result  x000D            x000D          x000D        else   x000D        result missing from second push key   x000D        return result  x000D        x000D       result   x000D   x000D      reduce b  function  result  value  key    x000D      if  a hasOwnProperty key     x000D        return result  x000D        else   x000D        result missing from first push key   x000D        return result  x000D        x000D       result   x000D   x000D    return result  x000D    x000D   x000D  var a editor   new JSONEditor     a   0     x000D    name   a   x000D    mode   code  x000D      x000D  var b editor   new JSONEditor     b   0     x000D    name   b   x000D    mode   code  x000D      x000D   x000D  var a     x000D    same  1  x000D    different  2  x000D    missing from b  3  x000D    missing nested from b    x000D      x  1  x000D      y  2 x000D       x000D    nested    x000D      same  1  x000D      different  2  x000D      missing from b  3 x000D      x000D    x000D   x000D  var b     x000D    same  1  x000D    different  99  x000D    missing from a  3  x000D    missing nested from a    x000D      x  1  x000D      y  2 x000D       x000D    nested    x000D      same  1  x000D      different  99  x000D      missing from a  3 x000D      x000D    x000D   x000D  a editor set a   x000D  b editor set b   x000D   x000D  var result editor   new JSONEditor     result   0     x000D    name   result   x000D    mode   view  x000D      x000D   x000D  var do compare   function     x000D    var a   a editor get    x000D    var b   b editor get    x000D    result editor set compare a  b    x000D    x000D   objects     objects section   x000D    margin-bottom  10px  x000D    x000D   objects section h1   x000D    background   444  x000D    color  white  x000D    font-family  monospace  x000D    display  inline-block  x000D    margin  0  x000D    padding  5px  x000D    x000D   jsoneditor-outer   ace editor   x000D  min-height  230px  important  x000D    x000D  button hover   x000D    background  orangered  x000D    x000D  button   x000D    cursor  pointer  x000D    background  red  x000D    color  white  x000D    text-align  left  x000D    font-weight  bold  x000D    border  5px solid crimson  x000D    outline  0  x000D    padding  10px  x000D    margin  10px 0px  x000D    x000D   lt link href  https   cdnjs cloudflare com ajax libs jsoneditor 5 5 10 jsoneditor min css  rel  stylesheet    gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jsoneditor 5 5 10 jsoneditor min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs lodash js 4 17 4 lodash min js  gt  lt  script gt  x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  objects  gt  x000D     lt section gt  x000D       lt h1 gt a  first object  lt  h1 gt  x000D       lt div id  a  gt  lt  div gt  x000D     lt  section gt  x000D     lt section gt  x000D       lt h1 gt b  second object  lt  h1 gt  x000D       lt div id  b  gt  lt  div gt  x000D     lt  section gt  x000D     lt button onClick  do compare    gt compare lt  button gt  x000D     lt section gt  x000D       lt h1 gt result lt  h1 gt  x000D       lt div id  result  gt  lt  div gt  x000D     lt  section gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

var isEqual   function f s      if  f     s  return true     if  Array isArray f  amp  amp Array isArray s         return isEqual f sort    s sort           if    isObject f         return isEqual f  s         return   isEqual f  s

User · Answer

just using vanilla js   x000D   x000D  let a       x000D  let b       x000D   x000D  a prop1   2  x000D  a prop2     prop3  2    x000D   x000D  b prop1   2  x000D  b prop2     prop3  3    x000D   x000D  JSON stringify a      JSON stringify b   x000D     false x000D  b prop2     prop3  2   x000D   x000D  JSON stringify a      JSON stringify b   x000D     true x000D   x000D   x000D

User · Answer

We had this requirement on getting the delta between two json updates for tracking database updates  Maybe someone else can find this helpful  https   gist github com jp6rt 7fcb6907e159d7851c8d59840b669e3d const     isObject    isEqual    transform    has    merge      require  lodash    const assert   require  assert            Perform a symmetric comparison on JSON object      param     baseObj - The base object to be used for comparison against the withObj      param     withObj - The withObject parameter is used as the comparison on the base object      param     invert  - Because this is a symmetric comparison  Some values in the with object                         that doesn t exist on the base will be lost in translation                          You can execute again the function again with the parameters interchanged                          However you will lose the reference if the value is from the base or with                         object if you intended to do an assymetric comparison                          Setting this to true will do make sure the reference is not lost      returns           - The returned object will label the result of the comparison with the                         value from base and with object      const diffSym    baseObj  withObj  invert   false    gt  transform baseObj   result  value  key    gt      if  isEqual value  withObj key        amp  amp  has withObj  key         return         if  isObject value       amp  amp  isObject withObj key        amp  amp   Array isArray value         result key    diffSym value  withObj key   invert       return         if   invert        result key            base  value        with  withObj key              return         if  invert        result key            base  withObj key         with  value                         Perform a assymmetric comparison on JSON object      param     baseObj - The base object to be used for comparison against the withObj      param     withObj - The withObject parameter is used as the comparison on the base object      returns           - The returned object will label the values with                         reference to the base and with object      const diffJSON    baseObj  withObj    gt         Deep clone the objects so we don t update the reference objects    const baseObjClone   JSON parse JSON stringify baseObj      const withObjClone   JSON parse JSON stringify withObj       const beforeDelta   diffSym baseObjClone  withObjClone     const afterDelta   diffSym withObjClone  baseObjClone  true      return merge afterDelta  beforeDelta          By Example   const beforeDataObj       a  1    c    d  2  f  3      g  4    h  5     const afterDataObj       a  2    b  3    c    d  1  e  1      h  5      const delta   diffJSON beforeDataObj  afterDataObj       Assert expected result  assert isEqual delta      a    base  1  with  2      b    base  undefined  with  3      c        d    base  2  with  1        e    base  undefined  with  1        f    base  3  with  undefined           g    base  4  with  undefined

User · Answer

Completing the answer from Adam Boduch  this one takes into differences in properties  const differenceOfKeys       objects    gt      difference    objects map obj   gt  Object keys obj     const differenceObj    a  b    gt       reduce a   result  value  key    gt          isEqual value  b key     result       result  key       differenceOfKeys b  a

User · Answer

Here s a concise solution     differenceWith a  b    isEqual

User · Answer

I took a stab a Adam Boduch s code to output a deep diff - this is entirely untested but the pieces are there   function diff  obj1  obj2  path        obj1   obj1            obj2   obj2             return   reduce obj1  function result  value  key            var p   path   path         key   key          if    isObject value                 var d   diff value  obj2 key   p               return d length   result concat d    result                    return   isEqual value  obj2 key     result   result concat p                  diff   foo   lol   bar    baz  true            returns   foo    bar baz

User · Answer

To build upon Sridhar Gudimela s answer  here it is updated in a way that uses TypeScript       U T I L S  interface LooseObjectInterface      key  string   any      type inputOptions   LooseObjectInterface   any            E X P O R T  export const objectCompare    objectA  inputOptions  objectB  inputOptions   LooseObjectInterface   gt      let diffObj  LooseObjectInterface          switch true        case  Array isArray objectA          objectA forEach  elem  any  index  number    gt            if   Array isArray diffObj             diffObj                diffObj index    objectCompare elem   objectB        index                     break       case  objectA     null  amp  amp  typeof objectA      quot object quot          Object keys objectA  forEach  key  any    gt            if  Array isArray objectA key                let arr   objectCompare objectA key   objectB key               if   Array isArray arr               arr                  arr forEach  elem  any  index  number    gt                if   Array isArray diffObj key                  diffObj key                     diffObj key  index    elem                          else if  typeof objectA key       quot object quot             diffObj key    objectCompare objectA key   objectB key            else if  objectA key       objectB        key             diffObj key    objectA key           else if  objectA key       objectB        key             delete objectA key                    break       default        break         Object keys diffObj  forEach  key  any    gt        if  typeof diffObj key       quot object quot   amp  amp  JSON stringify diffObj key        quot    quot         delete diffObj key            return diffObj      EDIT  My original answer used Flow  hence the downvotes  I assume  or maybe because my answer didn t use Lodash   however  having an answer to a similar problem can t hurt

User · Answer

If you need to know which properties are different  use reduce       reduce a  function result  value  key        return   isEqual value  b key             result   result concat key                   prop2

[javascript] How to do a deep comparison between 2 objects with lodash?

Examples related to javascript

Examples related to lodash