Generic deep diff between two objects

by

I wrote a little class that is doing what you want, you can test it here.

Only thing that is different from your proposal is that I don’t consider

[1,[{c: 1},2,3],{a:'hey'}]

and

[{a:'hey'},1,[3,{c: 1},2]]

to be same, because I think that arrays are not equal if order of their elements is not same. Of course this can be changed if needed. Also this code can be further enhanced to take function as argument that will be used to format diff object in arbitrary way based on passed primitive values (now this job is done by “compareValues” method).

var deepDiffMapper = function () {
  return {
    VALUE_CREATED: 'created',
    VALUE_UPDATED: 'updated',
    VALUE_DELETED: 'deleted',
    VALUE_UNCHANGED: 'unchanged',
    map: function(obj1, obj2) {
      if (this.isFunction(obj1) || this.isFunction(obj2)) {
        throw 'Invalid argument. Function given, object expected.';
      }
      if (this.isValue(obj1) || this.isValue(obj2)) {
        return {
          type: this.compareValues(obj1, obj2),
          data: obj1 === undefined ? obj2 : obj1
        };
      }

      var diff = {};
      for (var key in obj1) {
        if (this.isFunction(obj1[key])) {
          continue;
        }

        var value2 = undefined;
        if (obj2[key] !== undefined) {
          value2 = obj2[key];
        }

        diff[key] = this.map(obj1[key], value2);
      }
      for (var key in obj2) {
        if (this.isFunction(obj2[key]) || diff[key] !== undefined) {
          continue;
        }

        diff[key] = this.map(undefined, obj2[key]);
      }

      return diff;

    },
    compareValues: function (value1, value2) {
      if (value1 === value2) {
        return this.VALUE_UNCHANGED;
      }
      if (this.isDate(value1) && this.isDate(value2) && value1.getTime() === value2.getTime()) {
        return this.VALUE_UNCHANGED;
      }
      if (value1 === undefined) {
        return this.VALUE_CREATED;
      }
      if (value2 === undefined) {
        return this.VALUE_DELETED;
      }
      return this.VALUE_UPDATED;
    },
    isFunction: function (x) {
      return Object.prototype.toString.call(x) === '[object Function]';
    },
    isArray: function (x) {
      return Object.prototype.toString.call(x) === '[object Array]';
    },
    isDate: function (x) {
      return Object.prototype.toString.call(x) === '[object Date]';
    },
    isObject: function (x) {
      return Object.prototype.toString.call(x) === '[object Object]';
    },
    isValue: function (x) {
      return !this.isObject(x) && !this.isArray(x);
    }
  }
}();


var result = deepDiffMapper.map({
  a: 'i am unchanged',
  b: 'i am deleted',
  e: {
    a: 1,
    b: false,
    c: null
  },
  f: [1, {
    a: 'same',
    b: [{
      a: 'same'
    }, {
      d: 'delete'
    }]
  }],
  g: new Date('2017.11.25')
}, {
  a: 'i am unchanged',
  c: 'i am created',
  e: {
    a: '1',
    b: '',
    d: 'created'
  },
  f: [{
    a: 'same',
    b: [{
      a: 'same'
    }, {
      c: 'create'
    }]
  }, 1],
  g: new Date('2017.11.25')
});
console.log(result);

More Related Contents:

  1. Using jQuery to compare two arrays of Javascript objects
  2. How Can i Change the style of my angularjs object?
  3. Checking if a key exists in a JavaScript object?
  4. How to iterate over a JavaScript object?
  5. Javascript: Object Literal reference in own key’s function instead of ‘this’
  6. Firestore Update single item in an array field
  7. Sum JavaScript object propertyA values with the same object propertyB in an array of objects
  8. String to object in JS
  9. How to get objects value if its name contains dots?
  10. Merge keys array and values array into an object in JavaScript
  11. How to iterate (keys, values) in JavaScript? [duplicate]
  12. How to sum the values of a JavaScript object?
  13. How to display image with JavaScript?
  14. Convert JavaScript array of 2 element arrays into object key value pairs
  15. JavaScript equivalent of jQuery’s extend method
  16. Count duplicates within an Array of Objects
  17. detect differences between two strings with Javascript
  18. JavaScript, elegant way to check nested object properties for null/undefined [duplicate]
  19. Why does (“foo” === new String(“foo”)) evaluate to false in JavaScript?
  20. How do I reference the same Object’s properties during its creation? [duplicate]
  21. Find all values by specific key in a deep nested object
  22. Sort an array in the same order of another array
  23. Javascript oddness with array of objects and indexOf
  24. Filter nested array in object array by array of values
  25. how to use javascript Object.defineProperty
  26. Return an object key only if value is true
  27. How to merge duplicates in an array of objects and sum a specific property? [duplicate]
  28. Create a dynamic nested object from array of properties
  29. How to filter an object with its values in ES6
  30. how to get object’s name in javascript?

Leave a Comment