How to get only "changed" values ​​from two JSON objects

Question

This is a question that involves a more complicated way of comparing. So this is not a duplicate

I created JqTree that when a user changes their tree structure, both "old" JSON and "new" JSON structures should be compared, and only JSON values ​​that have been changed should be displayed.

For instance:

 [{"name":"node1","id":1,"is_open":true,"children": [ {"name":"child1","id":2}, {"name":"child2","id":3} ] }] 

After the client placed child1 under child2

 [{"name":"node1","id":1,"is_open":true,"children": [ {"name":"child2","id":3}, {"name":"child1","id":2} ] }] 

I just would like to compare them and check what values ​​have been changed, and show them with alert , which in this case will be:

{"name": "Child2", "ID": 3},
{"Name": "child1", "identifier": 2}

So far I have this tiny code that compares them:

JSON.stringify (object1) === JSON.stringify (object2); // I know that it is not too reliable.

But I'm looking for something that checks for "difference" and extracts it from JSON.

Thanks in advance.

Answer 1

Here you go: http://jsfiddle.net/musicin3d/cf5ddod1/3/

Edited version down for fun without clicking:

 // Call this function. // The others are helpers for this one. function getDiff(a, b){ var diff = (isArray(a) ? [] : {}); recursiveDiff(a, b, diff); return diff; } function recursiveDiff(a, b, node){ var checked = []; for(var prop in a){ if(typeof b[prop] == 'undefined'){ addNode(prop, '[[removed]]', node); } else if(JSON.stringify(a[prop]) != JSON.stringify(b[prop])){ // if value if(typeof b[prop] != 'object' || b[prop] == null){ addNode(prop, b[prop], node); } else { // if array if(isArray(b[prop])){ addNode(prop, [], node); recursiveDiff(a[prop], b[prop], node[prop]); } // if object else { addNode(prop, {}, node); recursiveDiff(a[prop], b[prop], node[prop]); } } } } } function addNode(prop, value, parent){ parent[prop] = value; } function isArray(obj){ return (Object.prototype.toString.call(obj) === '[object Array]'); } 

See the link above for more details. There is a comment that explains some of my assumptions.

This is an example of using recursion to solve your problem. If you are not familiar with recursion, I suggest you read it. Here's an SO article about it: What is recursion and when should I use it?

Note:
Using JSON.stringify , like me, is not a good idea. This is convenient for me as a programmer, because my program can “look into the future” to see if there is a change in every way, but it is expensive. I am already looking at the structure to do my job, and JSON.stringify also moves through the tree structure of each object that I send each time I call it. In computer science, we call this the worst-case scenario O (n ⁿ ), less formally called "very slow." A better design would simply cross the entire tree and track how it got to where it was. When he came to a standstill (called a "leaf" node "), he would use this knowledge to add the necessary data structure to the diff variable right away. This meant that our program would have to cross the whole data structure, but our code would be the only one does this.Thus, each node will be processed only once.

However, this should give you an idea of ​​what others have been offering.