Compare two JSON objects and just return another JSON object with only the changes

Question

I am new to JavaScript and trying to find the difference between two JSON Objects. The structure of the JSON object and its data is shown below. I got a code online which works for a normal JSON object but as this also has an array of data, I think it doesnt work for that. I tried different things but to no result. If you have pointers for this, it would be greatly appreciated. Thanks.

JSON Object 1(obj1) : {id: 1, details: Array[2], profession: "Business"}

{
  "id": "1",
  "details": [{
      "name": "Peter",
      "address": "Arizona",
      "phone": 9900998899
    },
    {
      "name": "Jam",
      "address": "Kentucky",
      "phone": 56034033343
    }
  ],
  "profession": "Business"
}

JSON Object 2(obj2) : {id: 2, details: Array[2], profession: "Business"}

{
  "id": "2",
  "details": [{
      "name": "Peter",
      "address": "Arizona",
      "phone": 9900998899
    },
    {
      "name": "David",
      "address": "Boston",
      "phone": 434323434
    }
  ],
  "profession": "Business"
}

Solution:

compare(obj1, obj2) {

  var result = {};

  for (key in obj1) {
    if (obj2[key] != obj1[key]) {
      result[key] = obj2[key];
    }
    if (typeof obj2[key] === '[object Array]' && typeof obj1[key] === '[object Array]') {
      result[key] = compare(obj1[key], obj2[key]);
    }
    if (typeof obj2[key] === 'object' && typeof obj1[key] === 'object') {
      result[key] = compare(obj1[key], obj2[key]);
    }
  }
  console.log(result);
}

Result:

Object {0: undefined, 1: undefined}
Object {id: "2", pingedAddresses: undefined, type: "Business"}

Expected:

{
  "id": "2",
  "details": [{
    "name": "David",
    "address": "Boston",
    "phone": 434323434
  }]
}

Answer 1

You can try following as a simple comparison:

Note: This answer assumes the structure to be exactly same. You can take this as reference and make it more generic for cases where structures are different.

Points to consider:

• Number of items are different. o1.details have 2 entries and o2.details have say 5 entries.
• Object structure is different. Properties in both object are different.

function getDifference(o1, o2) {
  var diff = {};
  var tmp = null;
  if (JSON.stringify(o1) === JSON.stringify(o2)) return;

  for (var k in o1) {
    if (Array.isArray(o1[k]) && Array.isArray(o2[k])) {
      tmp = o1[k].reduce(function(p, c, i) {
        var _t = getDifference(c, o2[k][i]);
        if (_t)
          p.push(_t);
        return p;
      }, []);
      if (Object.keys(tmp).length > 0)
        diff[k] = tmp;
    } else if (typeof(o1[k]) === "object" && typeof(o2[k]) === "object") {
      tmp = getDifference(o1[k], o2[k]);
      if (tmp && Object.keys(tmp) > 0)
        diff[k] = tmp;
    } else if (o1[k] !== o2[k]) {
      diff[k] = o2[k]
    }
  }
  return diff;
}

var o1={id:"1",details:[{name:"Peter",address:"Arizona",phone:9900998899},{name:"Jam",address:"Kentucky",phone:56034033343}],profession:"Business"},
o2={id:"2",details:[{name:"Peter",address:"Arizona",phone:9900998899},{name:"David",address:"Boston",phone:434323434}],profession:"Business"};

var d = getDifference(o1, o2)
console.log(d)

I had written an answer to detect changes in objects. You can even take reference from this as well.