Sort array of objects based on multiple properties

Sort array of objects based on multiple properties - javascript

I'm trying to sort array of objects based on arbitrary property inside the object.
I wrote the following code which works perfectly.
var customSort = function(data, sortBy, order) {
if (!(data && sortBy)) {
throw new Error('Specify the data source and atleast one property to sort it by');
}
if (!Array.isArray(data)) {
throw new Error('Specify the data source as an array');
}
order = order || 'asc';
function performSort(order, sortBy) {
return data.sort(function(a, b) {
var A = parse(a, sortBy);
var B = parse(b, sortBy);
if (A < B) {
return order === 'asc' ? -1 : 1;
} else if (A > B) {
return order === 'asc' ? 1 : -1;
} else {
return 0;
}
});
}
function parse(data, sortBy) {
var sortParams = sortBy.split('.');
var latestValue = data;
for (var i = 0; i < sortParams.length; i++) {
latestValue = latestValue[sortParams[i]];
}
if (!latestValue) {
throw new Error('Check the \'sortBy\' parameter. Unreachable parameter in \'sortBy\'');
}
if (typeof latestValue === 'string') {
return latestValue.toLowerCase();
} else {
return latestValue;
}
}
return performSort(order, sortBy);
};
var lonelyData = [{
a: {
b: 2
}
}, {
a: {
b: 1
}
}, {
a: {
b: 9
}
}, {
a: {
b: 7
}
}, {
a: {
b: 4
}
}, {
a: {
b: 2
}
}, {
a: {
b: 1
}
}];
console.log(customSort(lonelyData, 'a.b'));
Fiddle here: JSFiddle
Now, I'm trying to use recursion to have sort by multiple properties in following manner: First, sort by first property and then within that same property, sort by second property, and so on. For keeping things simple, I'm assuming same order for all the properties, i.e. either all increasing or all decreasing.
I wrote this code:
var customSort = function(data, sortBy, order) {
if (!(data && sortBy)) {
throw new Error('Specify the data source and atleast one property to sort it by');
}
if (!Array.isArray(data)) {
throw new Error('Specify the data source as an array');
}
if (!Array.isArray(sortBy)) {
sortBy = [sortBy];
}
order = order || 'asc';
function performSort(order, sortBy) {
return data.sort(function(a, b) {
function nestedSort() {
var highestOrder = sortBy[0];
var A = parse(a, highestOrder);
var B = parse(b, highestOrder);
if (A < B) {
return order === 'asc' ? -1 : 1;
} else if (A > B) {
return order === 'asc' ? 1 : -1;
} else {
sortBy.shift();
nestedSort();
}
}
return nestedSort();
});
}
function parse(data, sortBy) {
var sortParams = sortBy.split('.');
var latestValue = data;
for (var i = 0; i < sortParams.length; i++) {
latestValue = latestValue[sortParams[i]];
}
if (!latestValue) {
throw new Error('Check the \'sortBy\' parameter. Unreachable property passed in \'sortBy\'');
}
if (typeof latestValue === 'string') {
return latestValue.toLowerCase();
} else {
return latestValue;
}
}
return performSort(order, sortBy);
};
var lonelyData = [{
a: {
b: 2,
c: 'Z'
}
}, {
a: {
b: 2,
c: 'A'
}
}, {
a: {
b: 9,
c: 'Q'
}
}, {
a: {
b: 7,
c: 'L'
}
}, {
a: {
b: 7,
c: 'E'
}
}, {
a: {
b: 1,
c: 'A'
}
}, {
a: {
b: 1,
c: 'B'
}
}];
console.log(customSort(lonelyData, ['a.b', 'a.c']));
Fiddle here: JSFiddle
Unfortunately, I couldn't make it work. What am I missing here?

sortBy.shift();
nestedSort();
is your problem. shift does mutate the array, and drop the first item forever. The next time the comparison function is called to compare a with b, it will be ignored, and soon the array will be empty and your comparsion breaks completely.
Instead, use a simple loop:
return data.sort(function(a, b) {
for (var i=0; i<sortBy.length; i++)
var currentOrder = sortBy[i];
var A = parse(a, currentOrder);
var B = parse(b, currentOrder);
if (A < B) {
return order === 'asc' ? -1 : 1;
} else if (A > B) {
return order === 'asc' ? 1 : -1;
}
}
return 0;
});

Related

How to compare and combine two objects [duplicate]

I have two objects: oldObj and newObj.
The data in oldObj was used to populate a form and newObj is the result of the user changing data in this form and submitting it.
Both objects are deep, ie. they have properties that are objects or arrays of objects etc - they can be n levels deep, thus the diff algorithm needs to be recursive.
Now I need to not just figure out what was changed (as in added/updated/deleted) from oldObj to newObj, but also how to best represent it.
So far my thoughts was to just build a genericDeepDiffBetweenObjects method that would return an object on the form {add:{...},upd:{...},del:{...}} but then I thought: somebody else must have needed this before.
So... does anyone know of a library or a piece of code that will do this and maybe have an even better way of representing the difference (in a way that is still JSON serializable)?
Update:
I have thought of a better way to represent the updated data, by using the same object structure as newObj, but turning all property values into objects on the form:
{type: '<update|create|delete>', data: <propertyValue>}
So if newObj.prop1 = 'new value' and oldObj.prop1 = 'old value' it would set returnObj.prop1 = {type: 'update', data: 'new value'}
Update 2:
It gets truely hairy when we get to properties that are arrays, since the array [1,2,3] should be counted as equal to [2,3,1], which is simple enough for arrays of value based types like string, int & bool, but gets really difficult to handle when it comes to arrays of reference types like objects and arrays.
Example arrays that should be found equal:
[1,[{c: 1},2,3],{a:'hey'}] and [{a:'hey'},1,[3,{c: 1},2]]
Not only is it quite complex to check for this type of deep value equality, but also to figure out a good way to represent the changes that might be.

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);

Using Underscore, a simple diff:
var o1 = {a: 1, b: 2, c: 2},
o2 = {a: 2, b: 1, c: 2};
_.omit(o1, function(v,k) { return o2[k] === v; })
Results in the parts of o1 that correspond but with different values in o2:
{a: 1, b: 2}
It'd be different for a deep diff:
function diff(a,b) {
var r = {};
_.each(a, function(v,k) {
if(b[k] === v) return;
// but what if it returns an empty object? still attach?
r[k] = _.isObject(v)
? _.diff(v, b[k])
: v
;
});
return r;
}
As pointed out by #Juhana in the comments, the above is only a diff a-->b and not reversible (meaning extra properties in b would be ignored). Use instead a-->b-->a:
(function(_) {
function deepDiff(a, b, r) {
_.each(a, function(v, k) {
// already checked this or equal...
if (r.hasOwnProperty(k) || b[k] === v) return;
// but what if it returns an empty object? still attach?
r[k] = _.isObject(v) ? _.diff(v, b[k]) : v;
});
}
/* the function */
_.mixin({
diff: function(a, b) {
var r = {};
deepDiff(a, b, r);
deepDiff(b, a, r);
return r;
}
});
})(_.noConflict());
See http://jsfiddle.net/drzaus/9g5qoxwj/ for full example+tests+mixins

I'd like to offer an ES6 solution...This is a one-way diff, meaning that it will return keys/values from o2 that are not identical to their counterparts in o1:
let o1 = {
one: 1,
two: 2,
three: 3
}
let o2 = {
two: 2,
three: 3,
four: 4
}
let diff = Object.keys(o2).reduce((diff, key) => {
if (o1[key] === o2[key]) return diff
return {
...diff,
[key]: o2[key]
}
}, {})

Here is a JavaScript library which can be used for finding diff between two JavaScript objects:
Github URL:
https://github.com/cosmicanant/recursive-diff
Npmjs url: https://www.npmjs.com/package/recursive-diff
recursive-diff library can be used in the browser as well as in a Node.js based server side application. For browser, it can be used as below:
<script type="text" src="https://unpkg.com/recursive-diff#latest/dist/recursive-diff.min.js"/>
<script type="text/javascript">
const ob1 = {a:1, b: [2,3]};
const ob2 = {a:2, b: [3,3,1]};
const delta = recursiveDiff.getDiff(ob1,ob2);
/* console.log(delta) will dump following data
[
{path: ['a'], op: 'update', val: 2}
{path: ['b', '0'], op: 'update',val: 3},
{path: ['b',2], op: 'add', val: 1 },
]
*/
const ob3 = recursiveDiff.applyDiff(ob1, delta); //expect ob3 is deep equal to ob2
</script>
Whereas in a node.js based application it can be used as below:
const diff = require('recursive-diff');
const ob1 = {a: 1}, ob2: {b:2};
const diff = diff.getDiff(ob1, ob2);

Using Lodash:
_.mergeWith(oldObj, newObj, function (objectValue, sourceValue, key, object, source) {
if ( !(_.isEqual(objectValue, sourceValue)) && (Object(objectValue) !== objectValue)) {
console.log(key + "\n Expected: " + sourceValue + "\n Actual: " + objectValue);
}
});
I don't use key/object/source but I left it in there if you need to access them.
The object comparison just prevents the console from printing the differences to the console from the outermost element to the innermost element.
You can add some logic inside to handle arrays. Perhaps sort the arrays first. This is a very flexible solution.
EDIT
Changed from _.merge to _.mergeWith due to lodash update. Thanks Aviron for noticing the change.

const diff = require("deep-object-diff").diff;
let differences = diff(obj2, obj1);
There is an npm module with over 500k weekly downloads: https://www.npmjs.com/package/deep-object-diff
I like the object like representation of the differences - especially it is easy to see the structure, when it is formated.
const diff = require("deep-object-diff").diff;
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'
}
*/

Here is a solution that is:
TypeScript (but easily convertible to JavaScript)
have no lib dependencies
generic, and doesn't care about checking object types (aside the object type)
supports properties with value undefined
deep of not (default)
First we define the comparison result interface:
export interface ObjectDiff {
added: {} | ObjectDiff;
updated: {
[propName: string]: Update | ObjectDiff;
};
removed: {} | ObjectDiff;
unchanged: {} | ObjectDiff;
}
with the special case of change where we want to know what are old and new values:
export interface Update {
oldValue: any;
newValue: any;
}
Then we can provide the diff function which is merely two loops (with recursivity if deep is true):
export class ObjectUtils {
/**
* #return if obj is an Object, including an Array.
*/
static isObject(obj: any) {
return obj !== null && typeof obj === 'object';
}
/**
* #param oldObj The previous Object or Array.
* #param newObj The new Object or Array.
* #param deep If the comparison must be performed deeper than 1st-level properties.
* #return A difference summary between the two objects.
*/
static diff(oldObj: {}, newObj: {}, deep = false): ObjectDiff {
const added = {};
const updated = {};
const removed = {};
const unchanged = {};
for (const oldProp in oldObj) {
if (oldObj.hasOwnProperty(oldProp)) {
const newPropValue = newObj[oldProp];
const oldPropValue = oldObj[oldProp];
if (newObj.hasOwnProperty(oldProp)) {
if (newPropValue === oldPropValue) {
unchanged[oldProp] = oldPropValue;
} else {
updated[oldProp] = deep && this.isObject(oldPropValue) && this.isObject(newPropValue) ? this.diff(oldPropValue, newPropValue, deep) : {newValue: newPropValue};
}
} else {
removed[oldProp] = oldPropValue;
}
}
}
for (const newProp in newObj) {
if (newObj.hasOwnProperty(newProp)) {
const oldPropValue = oldObj[newProp];
const newPropValue = newObj[newProp];
if (oldObj.hasOwnProperty(newProp)) {
if (oldPropValue !== newPropValue) {
if (!deep || !this.isObject(oldPropValue)) {
updated[newProp].oldValue = oldPropValue;
}
}
} else {
added[newProp] = newPropValue;
}
}
}
return {added, updated, removed, unchanged};
}
}
As an example, calling:
ObjectUtils.diff(
{
a: 'a',
b: 'b',
c: 'c',
arr: ['A', 'B'],
obj: {p1: 'p1', p2: 'p2'}
},
{
b: 'x',
c: 'c',
arr: ['B', 'C'],
obj: {p2: 'p2', p3: 'p3'},
d: 'd'
},
);
will return:
{
added: {d: 'd'},
updated: {
b: {oldValue: 'b', newValue: 'x'},
arr: {oldValue: ['A', 'B'], newValue: ['B', 'C']},
obj: {oldValue: {p1: 'p1', p2: 'p2'}, newValue: {p2: 'p2', p3: 'p3'}}
},
removed: {a: 'a'},
unchanged: {c: 'c'},
}
and calling the same with the deep third parameter will return:
{
added: {d: 'd'},
updated: {
b: {oldValue: 'b', newValue: 'x'},
arr: {
added: {},
removed: {},
unchanged: {},
updated: {
0: {oldValue: 'A', newValue: 'B'},
1: {oldValue: 'B', newValue: 'C', }
}
},
obj: {
added: {p3: 'p3'},
removed: {p1: 'p1'},
unchanged: {p2: 'p2'},
updated: {}
}
},
removed: {a: 'a'},
unchanged: {c: 'c'},
}

I modified #sbgoran's answer so that the resulting diff object includes only the changed values, and omits values that were the same. In addition, it shows both the original value and the updated value.
var deepDiffMapper = function () {
return {
VALUE_CREATED: 'created',
VALUE_UPDATED: 'updated',
VALUE_DELETED: 'deleted',
VALUE_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)) {
let returnObj = {
type: this.compareValues(obj1, obj2),
original: obj1,
updated: obj2,
};
if (returnObj.type != this.VALUE_UNCHANGED) {
return returnObj;
}
return undefined;
}
var diff = {};
let foundKeys = {};
for (var key in obj1) {
if (this.isFunction(obj1[key])) {
continue;
}
var value2 = undefined;
if (obj2[key] !== undefined) {
value2 = obj2[key];
}
let mapValue = this.map(obj1[key], value2);
foundKeys[key] = true;
if (mapValue) {
diff[key] = mapValue;
}
}
for (var key in obj2) {
if (this.isFunction(obj2[key]) || foundKeys[key] !== undefined) {
continue;
}
let mapValue = this.map(undefined, obj2[key]);
if (mapValue) {
diff[key] = mapValue;
}
}
//2020-06-13: object length code copied from https://stackoverflow.com/a/13190981/2336212
if (Object.keys(diff).length > 0) {
return diff;
}
return undefined;
},
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);
}
}
}();

These days, there are quite a few modules available for this. I recently wrote a module to do this, because I wasn't satisfied with the numerous diffing modules I found. Its called odiff: https://github.com/Tixit/odiff . I also listed a bunch of the most popular modules and why they weren't acceptable in the readme of odiff, which you could take a look through if odiff doesn't have the properties you want. Here's an example:
var a = [{a:1,b:2,c:3}, {x:1,y: 2, z:3}, {w:9,q:8,r:7}]
var b = [{a:1,b:2,c:3},{t:4,y:5,u:6},{x:1,y:'3',z:3},{t:9,y:9,u:9},{w:9,q:8,r:7}]
var diffs = odiff(a,b)
/* diffs now contains:
[{type: 'add', path:[], index: 2, vals: [{t:9,y:9,u:9}]},
{type: 'set', path:[1,'y'], val: '3'},
{type: 'add', path:[], index: 1, vals: [{t:4,y:5,u:6}]}
]
*/

I know I'm late to the party, but I needed something similar that the above answers didn't help.
I was using Angular's $watch function to detect changes in a variable. Not only did I need to know whether a property had changed on the variable, but I also wanted to make sure that the property that changed was not a temporary, calculated field. In other words, I wanted to ignore certain properties.
Here's the code:
function diff(obj1,obj2,exclude) {
var r = {};
if (!exclude) exclude = [];
for (var prop in obj1) {
if (obj1.hasOwnProperty(prop) && prop != '__proto__') {
if (exclude.indexOf(obj1[prop]) == -1) {
// check if obj2 has prop
if (!obj2.hasOwnProperty(prop)) r[prop] = obj1[prop];
// check if prop is object and
// NOT a JavaScript engine object (i.e. __proto__), if so, recursive diff
else if (obj1[prop] === Object(obj1[prop])) {
var difference = diff(obj1[prop], obj2[prop]);
if (Object.keys(difference).length > 0) r[prop] = difference;
}
// check if obj1 and obj2 are equal
else if (obj1[prop] !== obj2[prop]) {
if (obj1[prop] === undefined)
r[prop] = 'undefined';
if (obj1[prop] === null)
r[prop] = null;
else if (typeof obj1[prop] === 'function')
r[prop] = 'function';
else if (typeof obj1[prop] === 'object')
r[prop] = 'object';
else
r[prop] = obj1[prop];
}
}
}
}
return r;
}
https://jsfiddle.net/rv01x6jo/
Here's how to use it:
// To only return the difference
var difference = diff(newValue, oldValue);
// To exclude certain properties
var difference = diff(newValue, oldValue, [newValue.prop1, newValue.prop2, newValue.prop3]);
Hope this helps someone.

Another lodash based solution which is a bit specific to the case when we want to see the diff for the update made to an object:
const diff = return {
old: _.pickBy(oldObject, (value, key) => { return !_.isEqual(value, newObject[key]); }),
new: _.pickBy(newObject, (value, key) => { return !_.isEqual(oldObject[key], value); })
}
Didn't use _.omitBy because of performance implications.

I've developed the Function named "compareValue()" in Javascript.
it returns whether the value is same or not.
I've called compareValue() in for loop of one Object.
you can get difference of two objects in diffParams.
var diffParams = {};
var obj1 = {"a":"1", "b":"2", "c":[{"key":"3"}]},
obj2 = {"a":"1", "b":"66", "c":[{"key":"55"}]};
for( var p in obj1 ){
if ( !compareValue(obj1[p], obj2[p]) ){
diffParams[p] = obj1[p];
}
}
function compareValue(val1, val2){
var isSame = true;
for ( var p in val1 ) {
if (typeof(val1[p]) === "object"){
var objectValue1 = val1[p],
objectValue2 = val2[p];
for( var value in objectValue1 ){
isSame = compareValue(objectValue1[value], objectValue2[value]);
if( isSame === false ){
return false;
}
}
}else{
if(val1 !== val2){
isSame = false;
}
}
}
return isSame;
}
console.log(diffParams);

I composed this for my own use-case (es5 environment), thought this might be useful for someone, so here it is:
function deepCompare(obj1, obj2) {
var diffObj = Array.isArray(obj2) ? [] : {}
Object.getOwnPropertyNames(obj2).forEach(function(prop) {
if (typeof obj2[prop] === 'object') {
diffObj[prop] = deepCompare(obj1[prop], obj2[prop])
// if it's an array with only length property => empty array => delete
// or if it's an object with no own properties => delete
if (Array.isArray(diffObj[prop]) && Object.getOwnPropertyNames(diffObj[prop]).length === 1 || Object.getOwnPropertyNames(diffObj[prop]).length === 0) {
delete diffObj[prop]
}
} else if(obj1[prop] !== obj2[prop]) {
diffObj[prop] = obj2[prop]
}
});
return diffObj
}
This might be not really efficient, but will output an object with only different props based on second Obj.

Here is a typescript version of #sbgoran code
export class deepDiffMapper {
static VALUE_CREATED = 'created';
static VALUE_UPDATED = 'updated';
static VALUE_DELETED = 'deleted';
static VALUE_UNCHANGED ='unchanged';
protected isFunction(obj: object) {
return {}.toString.apply(obj) === '[object Function]';
};
protected isArray(obj: object) {
return {}.toString.apply(obj) === '[object Array]';
};
protected isObject(obj: object) {
return {}.toString.apply(obj) === '[object Object]';
};
protected isDate(obj: object) {
return {}.toString.apply(obj) === '[object Date]';
};
protected isValue(obj: object) {
return !this.isObject(obj) && !this.isArray(obj);
};
protected compareValues (value1: any, value2: any) {
if (value1 === value2) {
return deepDiffMapper.VALUE_UNCHANGED;
}
if (this.isDate(value1) && this.isDate(value2) && value1.getTime() === value2.getTime()) {
return deepDiffMapper.VALUE_UNCHANGED;
}
if ('undefined' == typeof(value1)) {
return deepDiffMapper.VALUE_CREATED;
}
if ('undefined' == typeof(value2)) {
return deepDiffMapper.VALUE_DELETED;
}
return deepDiffMapper.VALUE_UPDATED;
}
public map(obj1: object, obj2: object) {
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 ('undefined' != typeof(obj2[key])) {
value2 = obj2[key];
}
diff[key] = this.map(obj1[key], value2);
}
for (var key in obj2) {
if (this.isFunction(obj2[key]) || ('undefined' != typeof(diff[key]))) {
continue;
}
diff[key] = this.map(undefined, obj2[key]);
}
return diff;
}
}

Here is a modified version of something found on gisthub.
isNullBlankOrUndefined = function (o) {
return (typeof o === "undefined" || o == null || o === "");
}
/**
* Deep diff between two object, using lodash
* #param {Object} object Object compared
* #param {Object} base Object to compare with
* #param {Object} ignoreBlanks will not include properties whose value is null, undefined, etc.
* #return {Object} Return a new object who represent the diff
*/
objectDifference = function (object, base, ignoreBlanks = false) {
if (!lodash.isObject(object) || lodash.isDate(object)) return object // special case dates
return lodash.transform(object, (result, value, key) => {
if (!lodash.isEqual(value, base[key])) {
if (ignoreBlanks && du.isNullBlankOrUndefined(value) && isNullBlankOrUndefined( base[key])) return;
result[key] = lodash.isObject(value) && lodash.isObject(base[key]) ? objectDifference(value, base[key]) : value;
}
});
}

I have used this piece of code for doing the task that you describe:
function mergeRecursive(obj1, obj2) {
for (var p in obj2) {
try {
if(obj2[p].constructor == Object) {
obj1[p] = mergeRecursive(obj1[p], obj2[p]);
}
// Property in destination object set; update its value.
else if (Ext.isArray(obj2[p])) {
// obj1[p] = [];
if (obj2[p].length < 1) {
obj1[p] = obj2[p];
}
else {
obj1[p] = mergeRecursive(obj1[p], obj2[p]);
}
}else{
obj1[p] = obj2[p];
}
} catch (e) {
// Property in destination object not set; create it and set its value.
obj1[p] = obj2[p];
}
}
return obj1;
}
this will get you a new object that will merge all the changes between the old object and the new object from your form

I just use ramda, for resolve the same problem, i need to know what is changed in new object. So here my design.
const oldState = {id:'170',name:'Ivab',secondName:'Ivanov',weight:45};
const newState = {id:'170',name:'Ivanko',secondName:'Ivanov',age:29};
const keysObj1 = R.keys(newState)
const filterFunc = key => {
const value = R.eqProps(key,oldState,newState)
return {[key]:value}
}
const result = R.map(filterFunc, keysObj1)
result is, name of property and it's status.
[{"id":true}, {"name":false}, {"secondName":true}, {"age":false}]

The more extended and simplified function from sbgoran's answer.
This allow deep scan and find an array's simillarity.
var result = objectDifference({
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'),
h: [1,2,3,4,5]
},
{
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'),
h: [4,5,6,7,8]
});
console.log(result);
function objectDifference(obj1, obj2){
if((dataType(obj1) !== 'array' && dataType(obj1) !== 'object') || (dataType(obj2) !== 'array' && dataType(obj2) !== 'object')){
var type = '';
if(obj1 === obj2 || (dataType(obj1) === 'date' && dataType(obj2) === 'date' && obj1.getTime() === obj2.getTime()))
type = 'unchanged';
else if(dataType(obj1) === 'undefined')
type = 'created';
if(dataType(obj2) === 'undefined')
type = 'deleted';
else if(type === '') type = 'updated';
return {
type: type,
data:(obj1 === undefined) ? obj2 : obj1
};
}
if(dataType(obj1) === 'array' && dataType(obj2) === 'array'){
var diff = [];
obj1.sort(); obj2.sort();
for(var i = 0; i < obj2.length; i++){
var type = obj1.indexOf(obj2[i]) === -1?'created':'unchanged';
if(type === 'created' && (dataType(obj2[i]) === 'array' || dataType(obj2[i]) === 'object')){
diff.push(
objectDifference(obj1[i], obj2[i])
);
continue;
}
diff.push({
type: type,
data: obj2[i]
});
}
for(var i = 0; i < obj1.length; i++){
if(obj2.indexOf(obj1[i]) !== -1 || dataType(obj1[i]) === 'array' || dataType(obj1[i]) === 'object')
continue;
diff.push({
type: 'deleted',
data: obj1[i]
});
}
} else {
var diff = {};
var key = Object.keys(obj1);
for(var i = 0; i < key.length; i++){
var value2 = undefined;
if(dataType(obj2[key[i]]) !== 'undefined')
value2 = obj2[key[i]];
diff[key[i]] = objectDifference(obj1[key[i]], value2);
}
var key = Object.keys(obj2);
for(var i = 0; i < key.length; i++){
if(dataType(diff[key[i]]) !== 'undefined')
continue;
diff[key[i]] = objectDifference(undefined, obj2[key[i]]);
}
}
return diff;
}
function dataType(data){
if(data === undefined || data === null) return 'undefined';
if(data.constructor === String) return 'string';
if(data.constructor === Array) return 'array';
if(data.constructor === Object) return 'object';
if(data.constructor === Number) return 'number';
if(data.constructor === Boolean) return 'boolean';
if(data.constructor === Function) return 'function';
if(data.constructor === Date) return 'date';
if(data.constructor === RegExp) return 'regex';
return 'unknown';
}

update 2022:
I came up with a breeze dead-simple algorithm that addresses the most edge cases:
flatten the objects
simple compare the two flattened objects and create a flattened diff object
unflatten the diff object
If you saved the flatted object you can repeat using it and do the "3)unflatten ..." just when you really need
let oldObject = {var1:'value1', var2:{ var1:'value1', var2:'value2'},var3:'value3'};
let newObject = {var2:{ var1:'value11', var3:'value3'},var3:'value3'};
let flatOldObject = flattenObject(oldObject)
/*
{
'var1':'value1',
'var2.var1':'value1',
'var2.var2':'value2',
'var3':'value3'
}
*/
let flatNewObject = flattenObject(newObject)
/*
{
'var2.var1':'value11',
'var2.var3':'value3',
'var3':'value3'
}
*/
let flatDiff = diffFlatten(flatOldObject, flatNewObject)
let [updated,removed] = flatDiff
/*
updated = {
'var2.var1':'value11',
'var2.var3':'value3'
}
removed = {
'var1':'value1'
}
*/
Of course you can come with your implementations for that steps. but here is mine:
Implementations
function flattenObject(obj) {
const object = Object.create(null);
const path = [];
const isObject = (value) => Object(value) === value;
function dig(obj) {
for (let [key, value] of Object.entries(obj)) {
path.push(key);
if (isObject(value)) dig(value);
else object[path.join('.')] = value;
path.pop();
}
}
dig(obj);
return object;
}
function diffFlatten(oldFlat, newFlat) {
const updated = Object.assign({}, oldFlat);
const removed = Object.assign({}, newFlat);
/**delete the unUpdated keys*/
for (let key in newFlat) {
if (newFlat[key] === oldFlat[key]) {
delete updated[key];
delete removed[key];
}
}
return [updated, removed];
}
function unflatenObject(flattenObject) {
const unFlatten = Object.create(null);
for (let [stringKeys, value] of Object.entries(flattenObject)) {
let chain = stringKeys.split('.')
let object = unFlatten
for (let [i, key] of chain.slice(0, -1).entries()) {
if (!object[key]) {
let needArray = Number.isInteger(Number(chain[+i + 1]))
object[key] = needArray ? [] : Object.create(null)
}
object = object[key];
}
let lastkey = chain.pop();
object[lastkey] = value;
}
return unFlatten;
}

I already wrote a function for one of my projects that will comparing an object as a user options with its internal clone.
It also can validate and even replace by default values if the user entered bad type of data or removed, in pure javascript.
In IE8 100% works. Tested successfully.
// ObjectKey: ["DataType, DefaultValue"]
reference = {
a : ["string", 'Defaul value for "a"'],
b : ["number", 300],
c : ["boolean", true],
d : {
da : ["boolean", true],
db : ["string", 'Defaul value for "db"'],
dc : {
dca : ["number", 200],
dcb : ["string", 'Default value for "dcb"'],
dcc : ["number", 500],
dcd : ["boolean", true]
},
dce : ["string", 'Default value for "dce"'],
},
e : ["number", 200],
f : ["boolean", 0],
g : ["", 'This is an internal extra parameter']
};
userOptions = {
a : 999, //Only string allowed
//b : ["number", 400], //User missed this parameter
c: "Hi", //Only lower case or case insitive in quotes true/false allowed.
d : {
da : false,
db : "HelloWorld",
dc : {
dca : 10,
dcb : "My String", //Space is not allowed for ID attr
dcc: "3thString", //Should not start with numbers
dcd : false
},
dce: "ANOTHER STRING",
},
e: 40,
f: true,
};
function compare(ref, obj) {
var validation = {
number: function (defaultValue, userValue) {
if(/^[0-9]+$/.test(userValue))
return userValue;
else return defaultValue;
},
string: function (defaultValue, userValue) {
if(/^[a-z][a-z0-9-_.:]{1,51}[^-_.:]$/i.test(userValue)) //This Regex is validating HTML tag "ID" attributes
return userValue;
else return defaultValue;
},
boolean: function (defaultValue, userValue) {
if (typeof userValue === 'boolean')
return userValue;
else return defaultValue;
}
};
for (var key in ref)
if (obj[key] && obj[key].constructor && obj[key].constructor === Object)
ref[key] = compare(ref[key], obj[key]);
else if(obj.hasOwnProperty(key))
ref[key] = validation[ref[key][0]](ref[key][1], obj[key]); //or without validation on user enties => ref[key] = obj[key]
else ref[key] = ref[key][1];
return ref;
}
//console.log(
alert(JSON.stringify( compare(reference, userOptions),null,2 ))
//);
/* result
{
"a": "Defaul value for \"a\"",
"b": 300,
"c": true,
"d": {
"da": false,
"db": "Defaul value for \"db\"",
"dc": {
"dca": 10,
"dcb": "Default value for \"dcb\"",
"dcc": 500,
"dcd": false
},
"dce": "Default value for \"dce\""
},
"e": 40,
"f": true,
"g": "This is an internal extra parameter"
}
*/

I stumbled here trying to look for a way to get the difference between two objects. This is my solution using Lodash:
// Get updated values (including new values)
var updatedValuesIncl = _.omitBy(curr, (value, key) => _.isEqual(last[key], value));
// Get updated values (excluding new values)
var updatedValuesExcl = _.omitBy(curr, (value, key) => (!_.has(last, key) || _.isEqual(last[key], value)));
// Get old values (by using updated values)
var oldValues = Object.keys(updatedValuesIncl).reduce((acc, key) => { acc[key] = last[key]; return acc; }, {});
// Get newly added values
var newCreatedValues = _.omitBy(curr, (value, key) => _.has(last, key));
// Get removed values
var deletedValues = _.omitBy(last, (value, key) => _.has(curr, key));
// Then you can group them however you want with the result
Code snippet below:
var last = {
"authed": true,
"inForeground": true,
"goodConnection": false,
"inExecutionMode": false,
"online": true,
"array": [1, 2, 3],
"deep": {
"nested": "value",
},
"removed": "value",
};
var curr = {
"authed": true,
"inForeground": true,
"deep": {
"nested": "changed",
},
"array": [1, 2, 4],
"goodConnection": true,
"inExecutionMode": false,
"online": false,
"new": "value"
};
// Get updated values (including new values)
var updatedValuesIncl = _.omitBy(curr, (value, key) => _.isEqual(last[key], value));
// Get updated values (excluding new values)
var updatedValuesExcl = _.omitBy(curr, (value, key) => (!_.has(last, key) || _.isEqual(last[key], value)));
// Get old values (by using updated values)
var oldValues = Object.keys(updatedValuesIncl).reduce((acc, key) => { acc[key] = last[key]; return acc; }, {});
// Get newly added values
var newCreatedValues = _.omitBy(curr, (value, key) => _.has(last, key));
// Get removed values
var deletedValues = _.omitBy(last, (value, key) => _.has(curr, key));
console.log('oldValues', JSON.stringify(oldValues));
console.log('updatedValuesIncl', JSON.stringify(updatedValuesIncl));
console.log('updatedValuesExcl', JSON.stringify(updatedValuesExcl));
console.log('newCreatedValues', JSON.stringify(newCreatedValues));
console.log('deletedValues', JSON.stringify(deletedValues));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

I took the answer above by #sbgoran and modified it for my case same as the question needed, to treat arrays as sets (i.e. order is not important for diff)
const deepDiffMapper = function () {
return {
VALUE_CREATED: "created",
VALUE_UPDATED: "updated",
VALUE_DELETED: "deleted",
VALUE_UNCHANGED: "unchanged",
map: function(obj1: any, obj2: any) {
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: obj2 === undefined ? obj1 : obj2
};
}
if (this.isArray(obj1) || this.isArray(obj2)) {
return {
type: this.compareArrays(obj1, obj2),
data: this.getArrayDiffData(obj1, obj2)
};
}
const diff: any = {};
for (const key in obj1) {
if (this.isFunction(obj1[key])) {
continue;
}
let value2 = undefined;
if (obj2[key] !== undefined) {
value2 = obj2[key];
}
diff[key] = this.map(obj1[key], value2);
}
for (const key in obj2) {
if (this.isFunction(obj2[key]) || diff[key] !== undefined) {
continue;
}
diff[key] = this.map(undefined, obj2[key]);
}
return diff;
},
getArrayDiffData: function(arr1: Array<any>, arr2: Array<any>) {
const set1 = new Set(arr1);
const set2 = new Set(arr2);
if (arr1 === undefined || arr2 === undefined) {
return arr1 === undefined ? arr1 : arr2;
}
const deleted = [...arr1].filter(x => !set2.has(x));
const added = [...arr2].filter(x => !set1.has(x));
return {
added, deleted
};
},
compareArrays: function(arr1: Array<any>, arr2: Array<any>) {
const set1 = new Set(arr1);
const set2 = new Set(arr2);
if (_.isEqual(_.sortBy(arr1), _.sortBy(arr2))) {
return this.VALUE_UNCHANGED;
}
if (arr1 === undefined) {
return this.VALUE_CREATED;
}
if (arr2 === undefined) {
return this.VALUE_DELETED;
}
return this.VALUE_UPDATED;
},
compareValues: function (value1: any, value2: any) {
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: any) {
return Object.prototype.toString.call(x) === "[object Function]";
},
isArray: function (x: any) {
return Object.prototype.toString.call(x) === "[object Array]";
},
isDate: function (x: any) {
return Object.prototype.toString.call(x) === "[object Date]";
},
isObject: function (x: any) {
return Object.prototype.toString.call(x) === "[object Object]";
},
isValue: function (x: any) {
return !this.isObject(x) && !this.isArray(x);
}
};
}();

This returns new object only with changed properties. (omit and isEmpty are functions from lodash)
export const getObjectDifference = <T extends {}>(originalObject: T, newObject: T) => {
const sameProperties: string[] = [];
Object.entries(originalObject).forEach(original => {
Object.entries(newObject).forEach(newObj => {
if (original[0] === newObj[0]) {
if (original[1] === newObj[1])
sameProperties.push(newObj[0]);
}
});
});
const objectDifference: T = omit(newObject, sameProperties) as T;
if (isEmpty(objectDifference))
return null;
else
return objectDifference; }

this will treat [1,2,3] and [3,2,1] as equal (deep object)
since I needed to visualize the difference between:
[
{
"a":1,
"b":1
},
{
"a":1,
"b":1
}
]
and
[
{
"a":1,
"b":1
},
{
"a":"OH NO",
"b":"an insertion"
},
{
"a":1,
"b":1
}
]
so I wanted to see them collide, here's what's left:
[]
and
[
{
"a":"OH NO",
"b":"an insertion"
}
]
imo this is the best way to represent it.
{add:{...},upd:{...},del:{...}} is hard to read
I provide 2 functions : ObjectCollide(obj1,obj2) and ArrayCollide(arr1,arr2)
console.log(ArrayCollide([1,2,3],[3,2,1]))
// false
//everything collided -> false
console.log(ArrayCollide([1],[2,1]))
// [ [], [ 2 ] ]
//1 and 1 collided, even if they are on different indices
//array of objects
const arr1 =
[
{
"a":1,
"b":1
},
{
"a":1,
"b":1
}
]
const arr2 =
[
{
"a":1,
"b":1
},
{
"a":"OH NO",
"b":"an insertion"
},
{
"a":1,
"b":1
}
]
const newArrays = ArrayCollide(arr1, arr2)
console.log(newArrays[0])
console.log(newArrays[1])
console.log('\n')
// []
// [ { a: 'OH NO', b: 'an insertion' } ]
// everything collided until this is left
//ObjectCollide
const obj1 = { a: '111', c: { q: 'no', a: '333' } }
const obj2 = { a: '111', p: 'ok', c: { a: '333' } }
ObjectCollide(obj1, obj2) //in place
console.log(obj1)
console.log(obj2)
console.log('\n')
// { c: { q: 'no' } }
// { p: 'ok', c: {} }
// obj["a"] collided and obj["c"]["a"] collided
//testing empty array
const a1 = { a: [] }
const a2 = { a: [], b: '2' }
ObjectCollide(a1, a2) //in place
console.log(a1)
console.log(a2)
console.log('\n')
// {}
// { b: '2' }
// obj["a"] collided
//DIFFERENT TYPES
const b1 = {a:true}
const b2 = {a:[1,2]}
ObjectCollide(b1,b2) //in place
console.log(b1)
console.log(b2)
// { a: true }
// { a: [ 1, 2 ] }
function ObjectCollide(obj1, obj2) {
//in place, returns true if same
// delete same
const keys = Object.keys(obj1)
const len = keys.length
let howManyDeleted = 0
for (let i = 0; i < len; i++) {
const key = keys[i]
const type1 = Array.isArray(obj1[key]) === true ? 'array' : typeof obj1[key]
const type2 = Array.isArray(obj2[key]) === true ? 'array' : typeof obj2[key]
if (type1!==type2) {
continue
}
switch (type1) {
case 'object':
if (ObjectCollide(obj1[key], obj2[key])) {
delete obj1[key]
delete obj2[key]
howManyDeleted++
}
continue
case 'array':
const newArrays = ArrayCollide(obj1[key], obj2[key])
if (newArrays) {
obj1[key] = newArrays[0]
obj2[key] = newArrays[1]
} else {
delete obj1[key]
delete obj2[key]
howManyDeleted++
}
continue
default:
//string, number, I hope it covers everything else
if (obj1[key] === obj2[key]) {
delete obj1[key]
delete obj2[key]
howManyDeleted++
}
}
}
if (howManyDeleted === len && Object.keys(obj2).length === 0) {
// return 'delete the stuff'
// same. we've deleted everything!
return true
}
}
function ArrayCollide(arr1, arr2) {
// returns [newArr1, newArr2] or false if same arrays (ignore order)
const stringifyObj = {}
const newArr1 = []
const newArr2 = []
for (let i = 0, len = arr1.length; i < len; i++) {
const value = arr1[i]
const stringified = JSON.stringify(value)
stringifyObj[stringified]
// arr = [count, ...]
const arr = stringifyObj[stringified] || (stringifyObj[stringified] = [0])
arr[0]++
arr.push(value)
}
//in 2 but not in 1
for (let i = 0, len = arr2.length; i < len; i++) {
const value = arr2[i]
const stringified = JSON.stringify(value)
const arr = stringifyObj[stringified]
if (arr === undefined) {
newArr2.push(value)
} else {
if (arr[0] === 0) {
newArr2.push(value)
} else {
arr[0]--
}
}
}
//in 1 but not in 2
stringifyKeys = Object.keys(stringifyObj)
for (let i = 0, len = stringifyKeys.length; i < len; i++) {
const arr = stringifyObj[stringifyKeys[i]]
for (let i = 1, len = arr[0] + 1; i < len; i++) {
newArr1.push(arr[i])
}
}
if (newArr1.length || newArr2.length) {
return [newArr1, newArr2]
} else {
return false
}
}
what I was trying to solve:
JSON file keeps reordering, I want to revert the JSON if it's equivalent: like {a:1,b:2} and {b:2,a:1}
but because I don't trust my code (I made a mistake once), I want to see the diff and check it myself, I can Ctrl+F into the original file using this diff.

Below method will create a new object with only changed fields
const findDiff = (obj1, obj2) => {
const isNativeType1 = typeof obj1 !== "object";
const isNativeType2 = typeof obj2 !== "object";
if (isNativeType1 && isNativeType2) {
return obj1 === obj2 ? null : obj2;
}
if (isNativeType1 && !isNativeType2) {
return obj2;
}
if (!isNativeType1 && isNativeType2) {
return obj2;
}
const isArray1 = Array.isArray(obj1);
const isArray2 = Array.isArray(obj2);
if (isArray1 && isArray2) {
const firstLenght = obj1.length;
const secondLenght = obj2.length;
const hasSameLength = firstLenght === secondLenght;
if (!hasSameLength) return obj2;
let hasChange = false;
for (let index = 0; index < obj1.length; index += 1) {
const element1 = obj1[index];
const element2 = obj2[index];
const changed = findDiff(element1, element2);
if (changed) {
hasChange = true;
}
}
return hasChange ? obj2 : null;
}
if (isArray1 || isArray2) return obj2;
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
const hasSameKeys = keys1.length === keys2.length;
if (!hasSameKeys) {
const retObj = { ...obj2 };
for (let index = 0; index < keys1.length; index += 1) {
const key = keys1[index];
if (!keys2.includes(key)) {
retObj[key] = null;
// eslint-disable-next-line no-continue
continue;
}
delete retObj[key];
}
return retObj;
}
let hasChange = false;
const retObj = {};
for (let index = 0; index < keys1.length; index += 1) {
const key = keys1[index];
const element1 = obj1[key];
const element2 = obj2[key];
const changed = findDiff(element1, element2);
if (changed) {
hasChange = true;
}
if (changed) {
retObj[key] = changed;
}
}
return hasChange ? retObj : null;
};
console.log(
JSON.stringify(findDiff(
{
a: 1,
b: 2,
c: {
a: ['1', 'b', { a: 'b', c: false }, true],
},
},
{
a: 1,
b: 2,
c: {
a: ['1','b', { a: 'b', c: true }, true],
},
}
), null, 2)
);

var base = [
{"value": "01", "label": "Pendências"},
{"value": "02", "label": "Ambulatório"},
{"value": "03", "label": "Urgência"},
{"value": "04", "label": "Clínica Médica"},
{"value": "05", "label": "Revisão"},
{"value": "06", "label": "Imagens"},
];
var used = [
{"value": "01", "label": "Pendências"},
{"value": "02", "label": "Ambulatório"},
{"value": "03", "label": "Urgência"},
{"value": "04", "label": "Clínica Médica"},
];
function diff(obj1,obj2) {
var temp = JSON.stringify(obj2.map((x)=> x.value));
return obj1.filter((y)=> temp.indexOf(y.value)<0 && y);
}
var result = diff(base, used);
console.clear();
console.log('RESULTADO');
console.log(result);
codeped

function Difference (ob1,ob2){
let ob3={}
let status=false
for ( var a1 in ob1 ) {
for (var a2 in ob2){
if (a1===a2 && ob1[a1]===ob2[a2]){
status=true;
break;
};
};
if (status===false){
if (ob1[a2]===undefined){
ob3[a1]="ob1:"+ob1[a1]+", ob2:"+ob2[a1];
};
if ( ob2[a1]===undefined){
ob3[a2]="ob1:"+ob1[a2]+", ob2:"+ob2[a2];
}else {
ob3[a1]="ob1:"+ob1[a1] +", ob2:"+ob2[a1];
};
}else {
status=false;
};
};
console.log(ob3);
};

For a simple object diff I like the very straightforward:
function simpleObjectDiff(obj1, obj2) {
return Object.fromEntries(
Object.entries(obj1)
.filter(([key, value]) => value !== obj2[key])
)
}

How to merge array of objects in one object, including inner objects - JavaScript?

Suppose I have the following array of objects:
var list = [
{ a: 1,
b: { c: 'x', k: []}
},
{ a: 1,
b: {c: 'x', d: 8}
}
];
I want them to be merged into one "generic" object, for this example, it would be:
{a: 1, b: {c: 'x', d:'8', k[]}}
As you can see, all nested objects are merged too. But I can't gain it. If I use Object.assign it creates new nested objects if they are different, that is duplicates them:
var res = Object.assign({}, ...list);
// res: {
a: 1,
b: {c: 'x', k: []},
b: {c: 'x', d: 8}
}

You could try the following using the reduce method:
var list = [{
a: 1,
b: {
a: 4,
k: 3
}
}, {
a: 1,
s: 11,
b: {
ab: 4,
d: 8
}
}]
var result = list.reduce(function(acc, item) {
var obj = { ...item
}
Object.keys(obj).forEach(function(item) {
if (acc[item]) { //if a property with the the key, 'item' already exists, then append to that
Object.assign(acc[item], obj[item]);
} else { // else add the key-value pair to the accumulator object.
acc[item] = obj[item];
}
})
return acc;
}, {})
console.log(result);

Deep merging is not simple to do yourself, That blog uses deep merge.
If you don't have webpack or nodejs you can use deepmerge like so:
// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
var canUseSymbol = typeof Symbol === 'function' && Symbol.for
var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7
function isReactElement(value) {
return value.$$typeof === REACT_ELEMENT_TYPE
}
function isNonNullObject(value) {
return !!value && typeof value === 'object'
}
function isSpecial(value) {
var stringValue = Object.prototype.toString.call(value)
return stringValue === '[object RegExp]'
|| stringValue === '[object Date]'
|| isReactElement(value)
}
function defaultIsMergeableObject(value) {
return isNonNullObject(value)
&& !isSpecial(value)
}
function emptyTarget(val) {
return Array.isArray(val) ? [] : {}
}
function cloneUnlessOtherwiseSpecified(value, options) {
return (options.clone !== false && options.isMergeableObject(value))
? deepmerge(emptyTarget(value), value, options)
: value
}
function defaultArrayMerge(target, source, options) {
return target.concat(source).map(function(element) {
return cloneUnlessOtherwiseSpecified(element, options)
})
}
function mergeObject(target, source, options) {
var destination = {}
if (options.isMergeableObject(target)) {
Object.keys(target).forEach(function(key) {
destination[key] = cloneUnlessOtherwiseSpecified(target[key], options)
})
}
Object.keys(source).forEach(function(key) {
if (!options.isMergeableObject(source[key]) || !target[key]) {
destination[key] = cloneUnlessOtherwiseSpecified(source[key], options)
} else {
destination[key] = deepmerge(target[key], source[key], options)
}
})
return destination
}
function deepmerge(target, source, options) {
options = options || {}
options.arrayMerge = options.arrayMerge || defaultArrayMerge
options.isMergeableObject = options.isMergeableObject || defaultIsMergeableObject
var sourceIsArray = Array.isArray(source)
var targetIsArray = Array.isArray(target)
var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray
if (!sourceAndTargetTypesMatch) {
return cloneUnlessOtherwiseSpecified(source, options)
} else if (sourceIsArray) {
return options.arrayMerge(target, source, options)
} else {
return mergeObject(target, source, options)
}
}
deepmerge.all = function deepmergeAll(array, options) {
if (!Array.isArray(array)) {
throw new Error('first argument should be an array')
}
return array.reduce(function(prev, next) {
return deepmerge(prev, next, options)
}, {})
}
var list = [{
a: 1,
b: {
c: 'x',
//merging 1,2 and 1,3 results in [1,2,1,3] you can change that in defaultArrayMerge
k: [1,2]
}
},
{
a: 1,
b: {
c: 'x',
k: [1,3],
d: 8
}
}];
console.log(
deepmerge.all(list)
)

You can use the reduce method. Remove the first element from the original list , that object will be the base method.
var list = [{
a: 1,
b: {
c: 'x',
k: []
}
},
{
a: 1,
b: {
c: 'x',
d: 8
}
}
];
// Remove the first element from the array. The first element will be
// the base object
// slice will return a new array without the first object
// apply reduce on this list
let _temp = list.slice(1);
let x = _temp.reduce(function(acc,curr,currIndex){
for(let keys in curr){
// checking if the base object have the same key as of current object
if(acc.hasOwnProperty(keys)){
// if base object and current object has the key then
// check if the type is an object
if(typeof curr[keys] ==='object'){
// now get the key from both the object
// & check which one is missong. Add that key and value to the
// base object
let keysFromACC = Object.keys(acc[keys]);
let keysFromCURR = Object.keys(curr[keys]);
keysFromCURR.forEach(function(item){
if(keysFromACC.indexOf(item) ===-1){
acc[keys][item] = curr[keys][item]
}
})
}
}
else{
// if the base object does not have key which current object
// has then add the key to base object
acc[keys]= curr[keys]
}
}
return acc;
},list[0]);
console.log(x)

Unflatten JS object and convert arrays

I have a function used to flatten objects like so:
let object = {
a: 1,
b: [
{ c: 2 },
{ c: 3 }
]
};
flatten(object)
// returns {
'a': 1,
'b.0.c': 2,
'b.1.c': 3
}
I need to unflatten objects, but also revert arrays to how they were. I have the following code:
unflatten(obj) {
let final = {};
for (let prop in obj) {
this.assign(final, prop.split('.'), obj[prop]);
}
return final;
}
assign(final, path, value) {
let lastKeyIndex = path.length-1;
for (var i = 0; i < lastKeyIndex; ++ i) {
let key = path[i];
if (!(key in final)) {
final[key] = {};
}
final = final[key];
}
final[path[lastKeyIndex]] = value;
}
which works for the most part, but it treats arrays like so:
{
a: 1,
b: { // Notice how b's value is now an object
"0": { c: 2 }, // Notice how these now have a key corresponding to their index
"1": { c: 3 }
}
}
Whereas I need b to be an array like before:
{
a: 1,
b: [
{ c: 2 },
{ c: 3 }
]
}
I'm at a loss for where to go from here. It needs to be able to deal with an arbitrary number of arrays like:
'a.b.0.c.0.d',
'a.b.0.c.1.d',
'a.b.1.c.0.d',
'a.b.1.c.1.d',
'a.b.1.c.2.d',
// etc
It needs to be vanilla JS, but es2015 is fine. It it assumed that any key that's a number is actually part of an array.
If anyone has any advice, it's appreciated!

When you find that key is not in final, you should check to see if the next key in the path is only digits (using a regular expression) and, if so, assign to an array instead of an object:
if (!(key in final)) {
final[key] = /^\d+$/.test(path[i + 1]) ? [] : {};
}
let object = {
a: 1,
b: [{
c: 2
},
{
c: 3
}
]
};
let flattened = {
'a': 1,
'b.0.c': 2,
'b.1.c': 3
}
function unflatten(obj) {
let final = {};
for (let prop in obj) {
assign(final, prop.split('.'), obj[prop]);
}
return final;
}
function assign (final, path, value) {
let lastKeyIndex = path.length - 1;
for (var i = 0; i < lastKeyIndex; ++i) {
let key = path[i];
if (!(key in final)) {
final[key] = /^\d+$/.test(path[i + 1]) ? [] : {};
}
final = final[key];
}
final[path[lastKeyIndex]] = value;
}
console.log(unflatten(flattened))
.as-console-wrapper { min-height: 100vh; }

You could iterate the keys and then split the string for single properties. For building a new object, you could check for number and take an array for these properties.
function setValue(object, path, value) {
var way = path.split('.'),
last = way.pop();
way.reduce(function (o, k, i, kk) {
return o[k] = o[k] || (isFinite(i + 1 in kk ? kk[i + 1] : last) ? [] : {});
}, object)[last] = value;
}
function unFlatten(object) {
var keys = Object.keys(object),
result = isFinite(keys[0][0]) ? [] : {};
keys.forEach(function (k) {
setValue(result, k, object[k]);
});
return result;
}
console.log(unFlatten({
'a': 1,
'b.0.c': 2,
'b.1.c': 3
}));
console.log(unFlatten({
'0': 1,
'1.0.c': 2,
'1.1.c': 3
}));
.as-console-wrapper { max-height: 100% !important; top: 0; }

Compare 2 objects and remove repeating keys between

I am experimenting on objects, and what I am trying to achieve is to remove keys found in object1 if those keys exist in object2.
Here is the example:
var original = {
a: 1,
b: 2,
c: 3,
e: {
tester: 0,
combination: {
0: 1
}
},
0: {
test: "0",
2: "hello"
}
};
var badKeys = {
a: 1,
b: 2,
0: {
test: "0",
}
}
var expectedResult = {
c: 3,
e: {
tester: 0,
combination: {
0: 1
}
},
0: {
2: "hello"
}
}
I've tried using underscore difference function, but it doesn't work for objects, also not sure if this is the right function.
Can you help me to get the var expectedResult right?

You could use an iterative and recursive approach for geeting the wanted properties in a new object.
function deleteKeys(good, bad, result) {
Object.keys(good).forEach(function (key) {
if (bad[key] && typeof bad[key] === 'object') {
result[key] = {};
deleteKeys(good[key], bad[key], result[key]);
return;
}
if (!(key in bad) || good[key] !== bad[key]) {
result[key] = good[key];
}
});
}
var original = { a: 1, b: 2, c: 3, e: { tester: 0, combination: { 0: 1 } }, 0: { test: "0", 2: "hello", another: { a: { B: 2, C: { a: 3 } }, b: 2 } } },
badKeys = { a: 1, b: 2, 0: { test: "0", random: 2, another: { a: 1 } } },
result = {};
deleteKeys(original, badKeys, result);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

This would be the algorithm:
function removeDifferences (original, removeKeys) {
// Get keys of to be deleted properties.
var keys = Object.keys(removeKeys);
// Iterate all properties on removeKeys.
for (key of keys) {
// Check if property exists on original.
if (typeof original[key] !== undefined) {
// If the property is an object, call same function to remove properties.
if (typeof removeKeys[key] === 'object') {
removeDifferences(original[key], removeKeys[key]);
} else {
delete original[key];
}
}
}
return original;
}
Applied to your case:
/* Your data. */
var original = {
a: 1,
b: 2,
c: 3,
e: {
tester: 0,
combination: {
0: 1
}
},
0: {
test: "0",
2: "hello"
}
};
var badKeys = {
a: 1,
b: 2,
0: {
test: "0",
}
};
var expectedResult = {
c: 3,
e: {
tester: 0,
combination: {
0: 1
}
},
0: {
2: "hello"
}
};
/* Function */
function removeDifferences(original, removeKeys) {
// Get keys of to be deleted properties.
var keys = Object.keys(removeKeys);
// Iterate all properties on removeKeys.
for (key of keys) {
// Check if property exists on original.
if (typeof original[key] !== undefined) {
// If the property is an object, call same function to remove properties.
if (typeof removeKeys[key] === 'object') {
removeDifferences(original[key], removeKeys[key]);
} else {
delete original[key];
}
}
}
return original;
}
/* Application */
var output = removeDifferences(original, badKeys);
console.log(output);
.as-console-wrapper { max-height: 100% !important; top: 0; }

You can create recursive function that will return new object using for...in loop.
var original = {"0":{"2":"hello","test":"0"},"a":1,"b":2,"c":3,"e":{"tester":0,"combination":{"0":1}}}
var badKeys = {"0":{"test":"0"},"a":1,"b":2}
function remove(o1, o2) {
var result = {}
for (var i in o1) {
if (!o2[i]) result[i] = o1[i]
else if (o2[i]) {
if (typeof o1[i] == 'object' && typeof o2[i] == 'object') {
result[i] = Object.assign(result[i] || {}, remove(o1[i], o2[i]))
} else if (o1[i] != o2[i]) result[i] = o1[i]
}
}
return result
}
console.log(remove(original, badKeys))

Truly a job for some recursion and a bit of functional programming using a pure function. (Tested with Node v7.7.1)
"DoForAllNestedObjects" for applying some function "whattodo" on "every leaf on the dictionary tree" when there is an corresponding "leaf" in baddict.
let DoForAllNestedValues = (dict, baddict, whattodo) => {
for (let key in dict) {
if (typeof (dict[key]) === 'object' && typeof (baddict[key]) === 'object')
DoForAllNestedValues(dict[key], baddict[key], whattodo);
else
if (baddict[key])
whattodo(dict, key);
}
}
DoForAllNestedValues(original, badKeys, (obj, val) => delete obj[val]);
console.log(original);

Generic deep diff between two objects

I have two objects: oldObj and newObj.
The data in oldObj was used to populate a form and newObj is the result of the user changing data in this form and submitting it.
Both objects are deep, ie. they have properties that are objects or arrays of objects etc - they can be n levels deep, thus the diff algorithm needs to be recursive.
Now I need to not just figure out what was changed (as in added/updated/deleted) from oldObj to newObj, but also how to best represent it.
So far my thoughts was to just build a genericDeepDiffBetweenObjects method that would return an object on the form {add:{...},upd:{...},del:{...}} but then I thought: somebody else must have needed this before.
So... does anyone know of a library or a piece of code that will do this and maybe have an even better way of representing the difference (in a way that is still JSON serializable)?
Update:
I have thought of a better way to represent the updated data, by using the same object structure as newObj, but turning all property values into objects on the form:
{type: '<update|create|delete>', data: <propertyValue>}
So if newObj.prop1 = 'new value' and oldObj.prop1 = 'old value' it would set returnObj.prop1 = {type: 'update', data: 'new value'}
Update 2:
It gets truely hairy when we get to properties that are arrays, since the array [1,2,3] should be counted as equal to [2,3,1], which is simple enough for arrays of value based types like string, int & bool, but gets really difficult to handle when it comes to arrays of reference types like objects and arrays.
Example arrays that should be found equal:
[1,[{c: 1},2,3],{a:'hey'}] and [{a:'hey'},1,[3,{c: 1},2]]
Not only is it quite complex to check for this type of deep value equality, but also to figure out a good way to represent the changes that might be.

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);

Using Underscore, a simple diff:
var o1 = {a: 1, b: 2, c: 2},
o2 = {a: 2, b: 1, c: 2};
_.omit(o1, function(v,k) { return o2[k] === v; })
Results in the parts of o1 that correspond but with different values in o2:
{a: 1, b: 2}
It'd be different for a deep diff:
function diff(a,b) {
var r = {};
_.each(a, function(v,k) {
if(b[k] === v) return;
// but what if it returns an empty object? still attach?
r[k] = _.isObject(v)
? _.diff(v, b[k])
: v
;
});
return r;
}
As pointed out by #Juhana in the comments, the above is only a diff a-->b and not reversible (meaning extra properties in b would be ignored). Use instead a-->b-->a:
(function(_) {
function deepDiff(a, b, r) {
_.each(a, function(v, k) {
// already checked this or equal...
if (r.hasOwnProperty(k) || b[k] === v) return;
// but what if it returns an empty object? still attach?
r[k] = _.isObject(v) ? _.diff(v, b[k]) : v;
});
}
/* the function */
_.mixin({
diff: function(a, b) {
var r = {};
deepDiff(a, b, r);
deepDiff(b, a, r);
return r;
}
});
})(_.noConflict());
See http://jsfiddle.net/drzaus/9g5qoxwj/ for full example+tests+mixins

I'd like to offer an ES6 solution...This is a one-way diff, meaning that it will return keys/values from o2 that are not identical to their counterparts in o1:
let o1 = {
one: 1,
two: 2,
three: 3
}
let o2 = {
two: 2,
three: 3,
four: 4
}
let diff = Object.keys(o2).reduce((diff, key) => {
if (o1[key] === o2[key]) return diff
return {
...diff,
[key]: o2[key]
}
}, {})

Here is a JavaScript library which can be used for finding diff between two JavaScript objects:
Github URL:
https://github.com/cosmicanant/recursive-diff
Npmjs url: https://www.npmjs.com/package/recursive-diff
recursive-diff library can be used in the browser as well as in a Node.js based server side application. For browser, it can be used as below:
<script type="text" src="https://unpkg.com/recursive-diff#latest/dist/recursive-diff.min.js"/>
<script type="text/javascript">
const ob1 = {a:1, b: [2,3]};
const ob2 = {a:2, b: [3,3,1]};
const delta = recursiveDiff.getDiff(ob1,ob2);
/* console.log(delta) will dump following data
[
{path: ['a'], op: 'update', val: 2}
{path: ['b', '0'], op: 'update',val: 3},
{path: ['b',2], op: 'add', val: 1 },
]
*/
const ob3 = recursiveDiff.applyDiff(ob1, delta); //expect ob3 is deep equal to ob2
</script>
Whereas in a node.js based application it can be used as below:
const diff = require('recursive-diff');
const ob1 = {a: 1}, ob2: {b:2};
const diff = diff.getDiff(ob1, ob2);

Using Lodash:
_.mergeWith(oldObj, newObj, function (objectValue, sourceValue, key, object, source) {
if ( !(_.isEqual(objectValue, sourceValue)) && (Object(objectValue) !== objectValue)) {
console.log(key + "\n Expected: " + sourceValue + "\n Actual: " + objectValue);
}
});
I don't use key/object/source but I left it in there if you need to access them.
The object comparison just prevents the console from printing the differences to the console from the outermost element to the innermost element.
You can add some logic inside to handle arrays. Perhaps sort the arrays first. This is a very flexible solution.
EDIT
Changed from _.merge to _.mergeWith due to lodash update. Thanks Aviron for noticing the change.

const diff = require("deep-object-diff").diff;
let differences = diff(obj2, obj1);
There is an npm module with over 500k weekly downloads: https://www.npmjs.com/package/deep-object-diff
I like the object like representation of the differences - especially it is easy to see the structure, when it is formated.
const diff = require("deep-object-diff").diff;
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'
}
*/

Here is a solution that is:
TypeScript (but easily convertible to JavaScript)
have no lib dependencies
generic, and doesn't care about checking object types (aside the object type)
supports properties with value undefined
deep of not (default)
First we define the comparison result interface:
export interface ObjectDiff {
added: {} | ObjectDiff;
updated: {
[propName: string]: Update | ObjectDiff;
};
removed: {} | ObjectDiff;
unchanged: {} | ObjectDiff;
}
with the special case of change where we want to know what are old and new values:
export interface Update {
oldValue: any;
newValue: any;
}
Then we can provide the diff function which is merely two loops (with recursivity if deep is true):
export class ObjectUtils {
/**
* #return if obj is an Object, including an Array.
*/
static isObject(obj: any) {
return obj !== null && typeof obj === 'object';
}
/**
* #param oldObj The previous Object or Array.
* #param newObj The new Object or Array.
* #param deep If the comparison must be performed deeper than 1st-level properties.
* #return A difference summary between the two objects.
*/
static diff(oldObj: {}, newObj: {}, deep = false): ObjectDiff {
const added = {};
const updated = {};
const removed = {};
const unchanged = {};
for (const oldProp in oldObj) {
if (oldObj.hasOwnProperty(oldProp)) {
const newPropValue = newObj[oldProp];
const oldPropValue = oldObj[oldProp];
if (newObj.hasOwnProperty(oldProp)) {
if (newPropValue === oldPropValue) {
unchanged[oldProp] = oldPropValue;
} else {
updated[oldProp] = deep && this.isObject(oldPropValue) && this.isObject(newPropValue) ? this.diff(oldPropValue, newPropValue, deep) : {newValue: newPropValue};
}
} else {
removed[oldProp] = oldPropValue;
}
}
}
for (const newProp in newObj) {
if (newObj.hasOwnProperty(newProp)) {
const oldPropValue = oldObj[newProp];
const newPropValue = newObj[newProp];
if (oldObj.hasOwnProperty(newProp)) {
if (oldPropValue !== newPropValue) {
if (!deep || !this.isObject(oldPropValue)) {
updated[newProp].oldValue = oldPropValue;
}
}
} else {
added[newProp] = newPropValue;
}
}
}
return {added, updated, removed, unchanged};
}
}
As an example, calling:
ObjectUtils.diff(
{
a: 'a',
b: 'b',
c: 'c',
arr: ['A', 'B'],
obj: {p1: 'p1', p2: 'p2'}
},
{
b: 'x',
c: 'c',
arr: ['B', 'C'],
obj: {p2: 'p2', p3: 'p3'},
d: 'd'
},
);
will return:
{
added: {d: 'd'},
updated: {
b: {oldValue: 'b', newValue: 'x'},
arr: {oldValue: ['A', 'B'], newValue: ['B', 'C']},
obj: {oldValue: {p1: 'p1', p2: 'p2'}, newValue: {p2: 'p2', p3: 'p3'}}
},
removed: {a: 'a'},
unchanged: {c: 'c'},
}
and calling the same with the deep third parameter will return:
{
added: {d: 'd'},
updated: {
b: {oldValue: 'b', newValue: 'x'},
arr: {
added: {},
removed: {},
unchanged: {},
updated: {
0: {oldValue: 'A', newValue: 'B'},
1: {oldValue: 'B', newValue: 'C', }
}
},
obj: {
added: {p3: 'p3'},
removed: {p1: 'p1'},
unchanged: {p2: 'p2'},
updated: {}
}
},
removed: {a: 'a'},
unchanged: {c: 'c'},
}

I modified #sbgoran's answer so that the resulting diff object includes only the changed values, and omits values that were the same. In addition, it shows both the original value and the updated value.
var deepDiffMapper = function () {
return {
VALUE_CREATED: 'created',
VALUE_UPDATED: 'updated',
VALUE_DELETED: 'deleted',
VALUE_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)) {
let returnObj = {
type: this.compareValues(obj1, obj2),
original: obj1,
updated: obj2,
};
if (returnObj.type != this.VALUE_UNCHANGED) {
return returnObj;
}
return undefined;
}
var diff = {};
let foundKeys = {};
for (var key in obj1) {
if (this.isFunction(obj1[key])) {
continue;
}
var value2 = undefined;
if (obj2[key] !== undefined) {
value2 = obj2[key];
}
let mapValue = this.map(obj1[key], value2);
foundKeys[key] = true;
if (mapValue) {
diff[key] = mapValue;
}
}
for (var key in obj2) {
if (this.isFunction(obj2[key]) || foundKeys[key] !== undefined) {
continue;
}
let mapValue = this.map(undefined, obj2[key]);
if (mapValue) {
diff[key] = mapValue;
}
}
//2020-06-13: object length code copied from https://stackoverflow.com/a/13190981/2336212
if (Object.keys(diff).length > 0) {
return diff;
}
return undefined;
},
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);
}
}
}();

These days, there are quite a few modules available for this. I recently wrote a module to do this, because I wasn't satisfied with the numerous diffing modules I found. Its called odiff: https://github.com/Tixit/odiff . I also listed a bunch of the most popular modules and why they weren't acceptable in the readme of odiff, which you could take a look through if odiff doesn't have the properties you want. Here's an example:
var a = [{a:1,b:2,c:3}, {x:1,y: 2, z:3}, {w:9,q:8,r:7}]
var b = [{a:1,b:2,c:3},{t:4,y:5,u:6},{x:1,y:'3',z:3},{t:9,y:9,u:9},{w:9,q:8,r:7}]
var diffs = odiff(a,b)
/* diffs now contains:
[{type: 'add', path:[], index: 2, vals: [{t:9,y:9,u:9}]},
{type: 'set', path:[1,'y'], val: '3'},
{type: 'add', path:[], index: 1, vals: [{t:4,y:5,u:6}]}
]
*/

I know I'm late to the party, but I needed something similar that the above answers didn't help.
I was using Angular's $watch function to detect changes in a variable. Not only did I need to know whether a property had changed on the variable, but I also wanted to make sure that the property that changed was not a temporary, calculated field. In other words, I wanted to ignore certain properties.
Here's the code:
function diff(obj1,obj2,exclude) {
var r = {};
if (!exclude) exclude = [];
for (var prop in obj1) {
if (obj1.hasOwnProperty(prop) && prop != '__proto__') {
if (exclude.indexOf(obj1[prop]) == -1) {
// check if obj2 has prop
if (!obj2.hasOwnProperty(prop)) r[prop] = obj1[prop];
// check if prop is object and
// NOT a JavaScript engine object (i.e. __proto__), if so, recursive diff
else if (obj1[prop] === Object(obj1[prop])) {
var difference = diff(obj1[prop], obj2[prop]);
if (Object.keys(difference).length > 0) r[prop] = difference;
}
// check if obj1 and obj2 are equal
else if (obj1[prop] !== obj2[prop]) {
if (obj1[prop] === undefined)
r[prop] = 'undefined';
if (obj1[prop] === null)
r[prop] = null;
else if (typeof obj1[prop] === 'function')
r[prop] = 'function';
else if (typeof obj1[prop] === 'object')
r[prop] = 'object';
else
r[prop] = obj1[prop];
}
}
}
}
return r;
}
https://jsfiddle.net/rv01x6jo/
Here's how to use it:
// To only return the difference
var difference = diff(newValue, oldValue);
// To exclude certain properties
var difference = diff(newValue, oldValue, [newValue.prop1, newValue.prop2, newValue.prop3]);
Hope this helps someone.

Another lodash based solution which is a bit specific to the case when we want to see the diff for the update made to an object:
const diff = return {
old: _.pickBy(oldObject, (value, key) => { return !_.isEqual(value, newObject[key]); }),
new: _.pickBy(newObject, (value, key) => { return !_.isEqual(oldObject[key], value); })
}
Didn't use _.omitBy because of performance implications.

I've developed the Function named "compareValue()" in Javascript.
it returns whether the value is same or not.
I've called compareValue() in for loop of one Object.
you can get difference of two objects in diffParams.
var diffParams = {};
var obj1 = {"a":"1", "b":"2", "c":[{"key":"3"}]},
obj2 = {"a":"1", "b":"66", "c":[{"key":"55"}]};
for( var p in obj1 ){
if ( !compareValue(obj1[p], obj2[p]) ){
diffParams[p] = obj1[p];
}
}
function compareValue(val1, val2){
var isSame = true;
for ( var p in val1 ) {
if (typeof(val1[p]) === "object"){
var objectValue1 = val1[p],
objectValue2 = val2[p];
for( var value in objectValue1 ){
isSame = compareValue(objectValue1[value], objectValue2[value]);
if( isSame === false ){
return false;
}
}
}else{
if(val1 !== val2){
isSame = false;
}
}
}
return isSame;
}
console.log(diffParams);

I composed this for my own use-case (es5 environment), thought this might be useful for someone, so here it is:
function deepCompare(obj1, obj2) {
var diffObj = Array.isArray(obj2) ? [] : {}
Object.getOwnPropertyNames(obj2).forEach(function(prop) {
if (typeof obj2[prop] === 'object') {
diffObj[prop] = deepCompare(obj1[prop], obj2[prop])
// if it's an array with only length property => empty array => delete
// or if it's an object with no own properties => delete
if (Array.isArray(diffObj[prop]) && Object.getOwnPropertyNames(diffObj[prop]).length === 1 || Object.getOwnPropertyNames(diffObj[prop]).length === 0) {
delete diffObj[prop]
}
} else if(obj1[prop] !== obj2[prop]) {
diffObj[prop] = obj2[prop]
}
});
return diffObj
}
This might be not really efficient, but will output an object with only different props based on second Obj.

Here is a typescript version of #sbgoran code
export class deepDiffMapper {
static VALUE_CREATED = 'created';
static VALUE_UPDATED = 'updated';
static VALUE_DELETED = 'deleted';
static VALUE_UNCHANGED ='unchanged';
protected isFunction(obj: object) {
return {}.toString.apply(obj) === '[object Function]';
};
protected isArray(obj: object) {
return {}.toString.apply(obj) === '[object Array]';
};
protected isObject(obj: object) {
return {}.toString.apply(obj) === '[object Object]';
};
protected isDate(obj: object) {
return {}.toString.apply(obj) === '[object Date]';
};
protected isValue(obj: object) {
return !this.isObject(obj) && !this.isArray(obj);
};
protected compareValues (value1: any, value2: any) {
if (value1 === value2) {
return deepDiffMapper.VALUE_UNCHANGED;
}
if (this.isDate(value1) && this.isDate(value2) && value1.getTime() === value2.getTime()) {
return deepDiffMapper.VALUE_UNCHANGED;
}
if ('undefined' == typeof(value1)) {
return deepDiffMapper.VALUE_CREATED;
}
if ('undefined' == typeof(value2)) {
return deepDiffMapper.VALUE_DELETED;
}
return deepDiffMapper.VALUE_UPDATED;
}
public map(obj1: object, obj2: object) {
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 ('undefined' != typeof(obj2[key])) {
value2 = obj2[key];
}
diff[key] = this.map(obj1[key], value2);
}
for (var key in obj2) {
if (this.isFunction(obj2[key]) || ('undefined' != typeof(diff[key]))) {
continue;
}
diff[key] = this.map(undefined, obj2[key]);
}
return diff;
}
}

Here is a modified version of something found on gisthub.
isNullBlankOrUndefined = function (o) {
return (typeof o === "undefined" || o == null || o === "");
}
/**
* Deep diff between two object, using lodash
* #param {Object} object Object compared
* #param {Object} base Object to compare with
* #param {Object} ignoreBlanks will not include properties whose value is null, undefined, etc.
* #return {Object} Return a new object who represent the diff
*/
objectDifference = function (object, base, ignoreBlanks = false) {
if (!lodash.isObject(object) || lodash.isDate(object)) return object // special case dates
return lodash.transform(object, (result, value, key) => {
if (!lodash.isEqual(value, base[key])) {
if (ignoreBlanks && du.isNullBlankOrUndefined(value) && isNullBlankOrUndefined( base[key])) return;
result[key] = lodash.isObject(value) && lodash.isObject(base[key]) ? objectDifference(value, base[key]) : value;
}
});
}

I have used this piece of code for doing the task that you describe:
function mergeRecursive(obj1, obj2) {
for (var p in obj2) {
try {
if(obj2[p].constructor == Object) {
obj1[p] = mergeRecursive(obj1[p], obj2[p]);
}
// Property in destination object set; update its value.
else if (Ext.isArray(obj2[p])) {
// obj1[p] = [];
if (obj2[p].length < 1) {
obj1[p] = obj2[p];
}
else {
obj1[p] = mergeRecursive(obj1[p], obj2[p]);
}
}else{
obj1[p] = obj2[p];
}
} catch (e) {
// Property in destination object not set; create it and set its value.
obj1[p] = obj2[p];
}
}
return obj1;
}
this will get you a new object that will merge all the changes between the old object and the new object from your form

I just use ramda, for resolve the same problem, i need to know what is changed in new object. So here my design.
const oldState = {id:'170',name:'Ivab',secondName:'Ivanov',weight:45};
const newState = {id:'170',name:'Ivanko',secondName:'Ivanov',age:29};
const keysObj1 = R.keys(newState)
const filterFunc = key => {
const value = R.eqProps(key,oldState,newState)
return {[key]:value}
}
const result = R.map(filterFunc, keysObj1)
result is, name of property and it's status.
[{"id":true}, {"name":false}, {"secondName":true}, {"age":false}]

The more extended and simplified function from sbgoran's answer.
This allow deep scan and find an array's simillarity.
var result = objectDifference({
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'),
h: [1,2,3,4,5]
},
{
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'),
h: [4,5,6,7,8]
});
console.log(result);
function objectDifference(obj1, obj2){
if((dataType(obj1) !== 'array' && dataType(obj1) !== 'object') || (dataType(obj2) !== 'array' && dataType(obj2) !== 'object')){
var type = '';
if(obj1 === obj2 || (dataType(obj1) === 'date' && dataType(obj2) === 'date' && obj1.getTime() === obj2.getTime()))
type = 'unchanged';
else if(dataType(obj1) === 'undefined')
type = 'created';
if(dataType(obj2) === 'undefined')
type = 'deleted';
else if(type === '') type = 'updated';
return {
type: type,
data:(obj1 === undefined) ? obj2 : obj1
};
}
if(dataType(obj1) === 'array' && dataType(obj2) === 'array'){
var diff = [];
obj1.sort(); obj2.sort();
for(var i = 0; i < obj2.length; i++){
var type = obj1.indexOf(obj2[i]) === -1?'created':'unchanged';
if(type === 'created' && (dataType(obj2[i]) === 'array' || dataType(obj2[i]) === 'object')){
diff.push(
objectDifference(obj1[i], obj2[i])
);
continue;
}
diff.push({
type: type,
data: obj2[i]
});
}
for(var i = 0; i < obj1.length; i++){
if(obj2.indexOf(obj1[i]) !== -1 || dataType(obj1[i]) === 'array' || dataType(obj1[i]) === 'object')
continue;
diff.push({
type: 'deleted',
data: obj1[i]
});
}
} else {
var diff = {};
var key = Object.keys(obj1);
for(var i = 0; i < key.length; i++){
var value2 = undefined;
if(dataType(obj2[key[i]]) !== 'undefined')
value2 = obj2[key[i]];
diff[key[i]] = objectDifference(obj1[key[i]], value2);
}
var key = Object.keys(obj2);
for(var i = 0; i < key.length; i++){
if(dataType(diff[key[i]]) !== 'undefined')
continue;
diff[key[i]] = objectDifference(undefined, obj2[key[i]]);
}
}
return diff;
}
function dataType(data){
if(data === undefined || data === null) return 'undefined';
if(data.constructor === String) return 'string';
if(data.constructor === Array) return 'array';
if(data.constructor === Object) return 'object';
if(data.constructor === Number) return 'number';
if(data.constructor === Boolean) return 'boolean';
if(data.constructor === Function) return 'function';
if(data.constructor === Date) return 'date';
if(data.constructor === RegExp) return 'regex';
return 'unknown';
}

update 2022:
I came up with a breeze dead-simple algorithm that addresses the most edge cases:
flatten the objects
simple compare the two flattened objects and create a flattened diff object
unflatten the diff object
If you saved the flatted object you can repeat using it and do the "3)unflatten ..." just when you really need
let oldObject = {var1:'value1', var2:{ var1:'value1', var2:'value2'},var3:'value3'};
let newObject = {var2:{ var1:'value11', var3:'value3'},var3:'value3'};
let flatOldObject = flattenObject(oldObject)
/*
{
'var1':'value1',
'var2.var1':'value1',
'var2.var2':'value2',
'var3':'value3'
}
*/
let flatNewObject = flattenObject(newObject)
/*
{
'var2.var1':'value11',
'var2.var3':'value3',
'var3':'value3'
}
*/
let flatDiff = diffFlatten(flatOldObject, flatNewObject)
let [updated,removed] = flatDiff
/*
updated = {
'var2.var1':'value11',
'var2.var3':'value3'
}
removed = {
'var1':'value1'
}
*/
Of course you can come with your implementations for that steps. but here is mine:
Implementations
function flattenObject(obj) {
const object = Object.create(null);
const path = [];
const isObject = (value) => Object(value) === value;
function dig(obj) {
for (let [key, value] of Object.entries(obj)) {
path.push(key);
if (isObject(value)) dig(value);
else object[path.join('.')] = value;
path.pop();
}
}
dig(obj);
return object;
}
function diffFlatten(oldFlat, newFlat) {
const updated = Object.assign({}, oldFlat);
const removed = Object.assign({}, newFlat);
/**delete the unUpdated keys*/
for (let key in newFlat) {
if (newFlat[key] === oldFlat[key]) {
delete updated[key];
delete removed[key];
}
}
return [updated, removed];
}
function unflatenObject(flattenObject) {
const unFlatten = Object.create(null);
for (let [stringKeys, value] of Object.entries(flattenObject)) {
let chain = stringKeys.split('.')
let object = unFlatten
for (let [i, key] of chain.slice(0, -1).entries()) {
if (!object[key]) {
let needArray = Number.isInteger(Number(chain[+i + 1]))
object[key] = needArray ? [] : Object.create(null)
}
object = object[key];
}
let lastkey = chain.pop();
object[lastkey] = value;
}
return unFlatten;
}

I already wrote a function for one of my projects that will comparing an object as a user options with its internal clone.
It also can validate and even replace by default values if the user entered bad type of data or removed, in pure javascript.
In IE8 100% works. Tested successfully.
// ObjectKey: ["DataType, DefaultValue"]
reference = {
a : ["string", 'Defaul value for "a"'],
b : ["number", 300],
c : ["boolean", true],
d : {
da : ["boolean", true],
db : ["string", 'Defaul value for "db"'],
dc : {
dca : ["number", 200],
dcb : ["string", 'Default value for "dcb"'],
dcc : ["number", 500],
dcd : ["boolean", true]
},
dce : ["string", 'Default value for "dce"'],
},
e : ["number", 200],
f : ["boolean", 0],
g : ["", 'This is an internal extra parameter']
};
userOptions = {
a : 999, //Only string allowed
//b : ["number", 400], //User missed this parameter
c: "Hi", //Only lower case or case insitive in quotes true/false allowed.
d : {
da : false,
db : "HelloWorld",
dc : {
dca : 10,
dcb : "My String", //Space is not allowed for ID attr
dcc: "3thString", //Should not start with numbers
dcd : false
},
dce: "ANOTHER STRING",
},
e: 40,
f: true,
};
function compare(ref, obj) {
var validation = {
number: function (defaultValue, userValue) {
if(/^[0-9]+$/.test(userValue))
return userValue;
else return defaultValue;
},
string: function (defaultValue, userValue) {
if(/^[a-z][a-z0-9-_.:]{1,51}[^-_.:]$/i.test(userValue)) //This Regex is validating HTML tag "ID" attributes
return userValue;
else return defaultValue;
},
boolean: function (defaultValue, userValue) {
if (typeof userValue === 'boolean')
return userValue;
else return defaultValue;
}
};
for (var key in ref)
if (obj[key] && obj[key].constructor && obj[key].constructor === Object)
ref[key] = compare(ref[key], obj[key]);
else if(obj.hasOwnProperty(key))
ref[key] = validation[ref[key][0]](ref[key][1], obj[key]); //or without validation on user enties => ref[key] = obj[key]
else ref[key] = ref[key][1];
return ref;
}
//console.log(
alert(JSON.stringify( compare(reference, userOptions),null,2 ))
//);
/* result
{
"a": "Defaul value for \"a\"",
"b": 300,
"c": true,
"d": {
"da": false,
"db": "Defaul value for \"db\"",
"dc": {
"dca": 10,
"dcb": "Default value for \"dcb\"",
"dcc": 500,
"dcd": false
},
"dce": "Default value for \"dce\""
},
"e": 40,
"f": true,
"g": "This is an internal extra parameter"
}
*/

I stumbled here trying to look for a way to get the difference between two objects. This is my solution using Lodash:
// Get updated values (including new values)
var updatedValuesIncl = _.omitBy(curr, (value, key) => _.isEqual(last[key], value));
// Get updated values (excluding new values)
var updatedValuesExcl = _.omitBy(curr, (value, key) => (!_.has(last, key) || _.isEqual(last[key], value)));
// Get old values (by using updated values)
var oldValues = Object.keys(updatedValuesIncl).reduce((acc, key) => { acc[key] = last[key]; return acc; }, {});
// Get newly added values
var newCreatedValues = _.omitBy(curr, (value, key) => _.has(last, key));
// Get removed values
var deletedValues = _.omitBy(last, (value, key) => _.has(curr, key));
// Then you can group them however you want with the result
Code snippet below:
var last = {
"authed": true,
"inForeground": true,
"goodConnection": false,
"inExecutionMode": false,
"online": true,
"array": [1, 2, 3],
"deep": {
"nested": "value",
},
"removed": "value",
};
var curr = {
"authed": true,
"inForeground": true,
"deep": {
"nested": "changed",
},
"array": [1, 2, 4],
"goodConnection": true,
"inExecutionMode": false,
"online": false,
"new": "value"
};
// Get updated values (including new values)
var updatedValuesIncl = _.omitBy(curr, (value, key) => _.isEqual(last[key], value));
// Get updated values (excluding new values)
var updatedValuesExcl = _.omitBy(curr, (value, key) => (!_.has(last, key) || _.isEqual(last[key], value)));
// Get old values (by using updated values)
var oldValues = Object.keys(updatedValuesIncl).reduce((acc, key) => { acc[key] = last[key]; return acc; }, {});
// Get newly added values
var newCreatedValues = _.omitBy(curr, (value, key) => _.has(last, key));
// Get removed values
var deletedValues = _.omitBy(last, (value, key) => _.has(curr, key));
console.log('oldValues', JSON.stringify(oldValues));
console.log('updatedValuesIncl', JSON.stringify(updatedValuesIncl));
console.log('updatedValuesExcl', JSON.stringify(updatedValuesExcl));
console.log('newCreatedValues', JSON.stringify(newCreatedValues));
console.log('deletedValues', JSON.stringify(deletedValues));
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

I took the answer above by #sbgoran and modified it for my case same as the question needed, to treat arrays as sets (i.e. order is not important for diff)
const deepDiffMapper = function () {
return {
VALUE_CREATED: "created",
VALUE_UPDATED: "updated",
VALUE_DELETED: "deleted",
VALUE_UNCHANGED: "unchanged",
map: function(obj1: any, obj2: any) {
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: obj2 === undefined ? obj1 : obj2
};
}
if (this.isArray(obj1) || this.isArray(obj2)) {
return {
type: this.compareArrays(obj1, obj2),
data: this.getArrayDiffData(obj1, obj2)
};
}
const diff: any = {};
for (const key in obj1) {
if (this.isFunction(obj1[key])) {
continue;
}
let value2 = undefined;
if (obj2[key] !== undefined) {
value2 = obj2[key];
}
diff[key] = this.map(obj1[key], value2);
}
for (const key in obj2) {
if (this.isFunction(obj2[key]) || diff[key] !== undefined) {
continue;
}
diff[key] = this.map(undefined, obj2[key]);
}
return diff;
},
getArrayDiffData: function(arr1: Array<any>, arr2: Array<any>) {
const set1 = new Set(arr1);
const set2 = new Set(arr2);
if (arr1 === undefined || arr2 === undefined) {
return arr1 === undefined ? arr1 : arr2;
}
const deleted = [...arr1].filter(x => !set2.has(x));
const added = [...arr2].filter(x => !set1.has(x));
return {
added, deleted
};
},
compareArrays: function(arr1: Array<any>, arr2: Array<any>) {
const set1 = new Set(arr1);
const set2 = new Set(arr2);
if (_.isEqual(_.sortBy(arr1), _.sortBy(arr2))) {
return this.VALUE_UNCHANGED;
}
if (arr1 === undefined) {
return this.VALUE_CREATED;
}
if (arr2 === undefined) {
return this.VALUE_DELETED;
}
return this.VALUE_UPDATED;
},
compareValues: function (value1: any, value2: any) {
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: any) {
return Object.prototype.toString.call(x) === "[object Function]";
},
isArray: function (x: any) {
return Object.prototype.toString.call(x) === "[object Array]";
},
isDate: function (x: any) {
return Object.prototype.toString.call(x) === "[object Date]";
},
isObject: function (x: any) {
return Object.prototype.toString.call(x) === "[object Object]";
},
isValue: function (x: any) {
return !this.isObject(x) && !this.isArray(x);
}
};
}();

This returns new object only with changed properties. (omit and isEmpty are functions from lodash)
export const getObjectDifference = <T extends {}>(originalObject: T, newObject: T) => {
const sameProperties: string[] = [];
Object.entries(originalObject).forEach(original => {
Object.entries(newObject).forEach(newObj => {
if (original[0] === newObj[0]) {
if (original[1] === newObj[1])
sameProperties.push(newObj[0]);
}
});
});
const objectDifference: T = omit(newObject, sameProperties) as T;
if (isEmpty(objectDifference))
return null;
else
return objectDifference; }

this will treat [1,2,3] and [3,2,1] as equal (deep object)
since I needed to visualize the difference between:
[
{
"a":1,
"b":1
},
{
"a":1,
"b":1
}
]
and
[
{
"a":1,
"b":1
},
{
"a":"OH NO",
"b":"an insertion"
},
{
"a":1,
"b":1
}
]
so I wanted to see them collide, here's what's left:
[]
and
[
{
"a":"OH NO",
"b":"an insertion"
}
]
imo this is the best way to represent it.
{add:{...},upd:{...},del:{...}} is hard to read
I provide 2 functions : ObjectCollide(obj1,obj2) and ArrayCollide(arr1,arr2)
console.log(ArrayCollide([1,2,3],[3,2,1]))
// false
//everything collided -> false
console.log(ArrayCollide([1],[2,1]))
// [ [], [ 2 ] ]
//1 and 1 collided, even if they are on different indices
//array of objects
const arr1 =
[
{
"a":1,
"b":1
},
{
"a":1,
"b":1
}
]
const arr2 =
[
{
"a":1,
"b":1
},
{
"a":"OH NO",
"b":"an insertion"
},
{
"a":1,
"b":1
}
]
const newArrays = ArrayCollide(arr1, arr2)
console.log(newArrays[0])
console.log(newArrays[1])
console.log('\n')
// []
// [ { a: 'OH NO', b: 'an insertion' } ]
// everything collided until this is left
//ObjectCollide
const obj1 = { a: '111', c: { q: 'no', a: '333' } }
const obj2 = { a: '111', p: 'ok', c: { a: '333' } }
ObjectCollide(obj1, obj2) //in place
console.log(obj1)
console.log(obj2)
console.log('\n')
// { c: { q: 'no' } }
// { p: 'ok', c: {} }
// obj["a"] collided and obj["c"]["a"] collided
//testing empty array
const a1 = { a: [] }
const a2 = { a: [], b: '2' }
ObjectCollide(a1, a2) //in place
console.log(a1)
console.log(a2)
console.log('\n')
// {}
// { b: '2' }
// obj["a"] collided
//DIFFERENT TYPES
const b1 = {a:true}
const b2 = {a:[1,2]}
ObjectCollide(b1,b2) //in place
console.log(b1)
console.log(b2)
// { a: true }
// { a: [ 1, 2 ] }
function ObjectCollide(obj1, obj2) {
//in place, returns true if same
// delete same
const keys = Object.keys(obj1)
const len = keys.length
let howManyDeleted = 0
for (let i = 0; i < len; i++) {
const key = keys[i]
const type1 = Array.isArray(obj1[key]) === true ? 'array' : typeof obj1[key]
const type2 = Array.isArray(obj2[key]) === true ? 'array' : typeof obj2[key]
if (type1!==type2) {
continue
}
switch (type1) {
case 'object':
if (ObjectCollide(obj1[key], obj2[key])) {
delete obj1[key]
delete obj2[key]
howManyDeleted++
}
continue
case 'array':
const newArrays = ArrayCollide(obj1[key], obj2[key])
if (newArrays) {
obj1[key] = newArrays[0]
obj2[key] = newArrays[1]
} else {
delete obj1[key]
delete obj2[key]
howManyDeleted++
}
continue
default:
//string, number, I hope it covers everything else
if (obj1[key] === obj2[key]) {
delete obj1[key]
delete obj2[key]
howManyDeleted++
}
}
}
if (howManyDeleted === len && Object.keys(obj2).length === 0) {
// return 'delete the stuff'
// same. we've deleted everything!
return true
}
}
function ArrayCollide(arr1, arr2) {
// returns [newArr1, newArr2] or false if same arrays (ignore order)
const stringifyObj = {}
const newArr1 = []
const newArr2 = []
for (let i = 0, len = arr1.length; i < len; i++) {
const value = arr1[i]
const stringified = JSON.stringify(value)
stringifyObj[stringified]
// arr = [count, ...]
const arr = stringifyObj[stringified] || (stringifyObj[stringified] = [0])
arr[0]++
arr.push(value)
}
//in 2 but not in 1
for (let i = 0, len = arr2.length; i < len; i++) {
const value = arr2[i]
const stringified = JSON.stringify(value)
const arr = stringifyObj[stringified]
if (arr === undefined) {
newArr2.push(value)
} else {
if (arr[0] === 0) {
newArr2.push(value)
} else {
arr[0]--
}
}
}
//in 1 but not in 2
stringifyKeys = Object.keys(stringifyObj)
for (let i = 0, len = stringifyKeys.length; i < len; i++) {
const arr = stringifyObj[stringifyKeys[i]]
for (let i = 1, len = arr[0] + 1; i < len; i++) {
newArr1.push(arr[i])
}
}
if (newArr1.length || newArr2.length) {
return [newArr1, newArr2]
} else {
return false
}
}
what I was trying to solve:
JSON file keeps reordering, I want to revert the JSON if it's equivalent: like {a:1,b:2} and {b:2,a:1}
but because I don't trust my code (I made a mistake once), I want to see the diff and check it myself, I can Ctrl+F into the original file using this diff.

Below method will create a new object with only changed fields
const findDiff = (obj1, obj2) => {
const isNativeType1 = typeof obj1 !== "object";
const isNativeType2 = typeof obj2 !== "object";
if (isNativeType1 && isNativeType2) {
return obj1 === obj2 ? null : obj2;
}
if (isNativeType1 && !isNativeType2) {
return obj2;
}
if (!isNativeType1 && isNativeType2) {
return obj2;
}
const isArray1 = Array.isArray(obj1);
const isArray2 = Array.isArray(obj2);
if (isArray1 && isArray2) {
const firstLenght = obj1.length;
const secondLenght = obj2.length;
const hasSameLength = firstLenght === secondLenght;
if (!hasSameLength) return obj2;
let hasChange = false;
for (let index = 0; index < obj1.length; index += 1) {
const element1 = obj1[index];
const element2 = obj2[index];
const changed = findDiff(element1, element2);
if (changed) {
hasChange = true;
}
}
return hasChange ? obj2 : null;
}
if (isArray1 || isArray2) return obj2;
const keys1 = Object.keys(obj1);
const keys2 = Object.keys(obj2);
const hasSameKeys = keys1.length === keys2.length;
if (!hasSameKeys) {
const retObj = { ...obj2 };
for (let index = 0; index < keys1.length; index += 1) {
const key = keys1[index];
if (!keys2.includes(key)) {
retObj[key] = null;
// eslint-disable-next-line no-continue
continue;
}
delete retObj[key];
}
return retObj;
}
let hasChange = false;
const retObj = {};
for (let index = 0; index < keys1.length; index += 1) {
const key = keys1[index];
const element1 = obj1[key];
const element2 = obj2[key];
const changed = findDiff(element1, element2);
if (changed) {
hasChange = true;
}
if (changed) {
retObj[key] = changed;
}
}
return hasChange ? retObj : null;
};
console.log(
JSON.stringify(findDiff(
{
a: 1,
b: 2,
c: {
a: ['1', 'b', { a: 'b', c: false }, true],
},
},
{
a: 1,
b: 2,
c: {
a: ['1','b', { a: 'b', c: true }, true],
},
}
), null, 2)
);

var base = [
{"value": "01", "label": "Pendências"},
{"value": "02", "label": "Ambulatório"},
{"value": "03", "label": "Urgência"},
{"value": "04", "label": "Clínica Médica"},
{"value": "05", "label": "Revisão"},
{"value": "06", "label": "Imagens"},
];
var used = [
{"value": "01", "label": "Pendências"},
{"value": "02", "label": "Ambulatório"},
{"value": "03", "label": "Urgência"},
{"value": "04", "label": "Clínica Médica"},
];
function diff(obj1,obj2) {
var temp = JSON.stringify(obj2.map((x)=> x.value));
return obj1.filter((y)=> temp.indexOf(y.value)<0 && y);
}
var result = diff(base, used);
console.clear();
console.log('RESULTADO');
console.log(result);
codeped

function Difference (ob1,ob2){
let ob3={}
let status=false
for ( var a1 in ob1 ) {
for (var a2 in ob2){
if (a1===a2 && ob1[a1]===ob2[a2]){
status=true;
break;
};
};
if (status===false){
if (ob1[a2]===undefined){
ob3[a1]="ob1:"+ob1[a1]+", ob2:"+ob2[a1];
};
if ( ob2[a1]===undefined){
ob3[a2]="ob1:"+ob1[a2]+", ob2:"+ob2[a2];
}else {
ob3[a1]="ob1:"+ob1[a1] +", ob2:"+ob2[a1];
};
}else {
status=false;
};
};
console.log(ob3);
};

For a simple object diff I like the very straightforward:
function simpleObjectDiff(obj1, obj2) {
return Object.fromEntries(
Object.entries(obj1)
.filter(([key, value]) => value !== obj2[key])
)
}

We Keep Coding

JavaScript is the programming language of the Web.

Sort array of objects based on multiple properties - javascript

Related

How to compare and combine two objects [duplicate]

How to merge array of objects in one object, including inner objects - JavaScript?

Unflatten JS object and convert arrays

Compare 2 objects and remove repeating keys between

Generic deep diff between two objects

Categories

Resources