JavaScript - Return differences between two Objects?

Question

Can someone show me how to return the new data when comparing something like this. using vanilla JavaScript.

{
    "48": "{\"sid\":\"48\",\"name\":\"title 1\"}",
    "77": "{\"sid\":\"77\",\"name\":\"The blahblah title\"}"
}

compared to this

{
    "48": "{\"sid\":\"48\",\"name\":\"title 1\"}",
    "77": "{\"sid\":\"77\",\"name\":\"The blahblah title\"}",
    "83": "{\"sid\":\"83\",\"name\":\"The blahblah derp\"}",
    "87": "{\"sid\":\"87\",\"name\":\"The derpy title 4\"}"
}

it should return only the differences.

{
    "83": "{\"sid\":\"83\",\"name\":\"The blahblah derp\"}",
    "87": "{\"sid\":\"87\",\"name\":\"The derpy title 4\"}"
}

Possible duplicate of [How to get the difference between two arrays in JavaScript?](https://stackoverflow.com/questions/1187518/how-to-get-the-difference-between-two-arrays-in-javascript) — Ari Seyhun, Sep 12 '19 at 04:47
They are not multidimensional, they are flat objects. `[key: string]: string;` — Ari Seyhun, Sep 12 '19 at 04:50
Possible duplicate of [Object comparison in JavaScript](https://stackoverflow.com/questions/1068834/object-comparison-in-javascript) — distante, Sep 12 '19 at 05:06
Possible duplicate of [getting difference object from two objects using es6](https://stackoverflow.com/questions/57669696/getting-difference-object-from-two-objects-using-es6) — Nick Parsons, Sep 15 '19 at 01:55
I give really nice answered here: https://stackoverflow.com/a/71173966/1919821 — pery mimon, Feb 18 '22 at 14:18

Nikhil · Accepted Answer · 2019-09-12T05:07:20.010

11

You can use Object.keys() and Array.includes() to do that.

var data = {
  "48": "{\"sid\":\"48\",\"name\":\"title 1\"}",
  "77": "{\"sid\":\"77\",\"name\":\"The blahblah title\"}",
  "83": "{\"sid\":\"83\",\"name\":\"The blahblah derp\"}",
  "87": "{\"sid\":\"87\",\"name\":\"The derpy title 4\"}"
};

var obj1 = {
  "48": "{\"sid\":\"48\",\"name\":\"title 1\"}",
  "77": "{\"sid\":\"77\",\"name\":\"The blahblah title\"}"
};

var result = {};
var keys = Object.keys(obj1);

for (var key in data) {
 if (!keys.includes(key)) {
  result[key] = data[key];
 }
}

console.log(result);

edited Sep 12 '19 at 05:07

answered Sep 12 '19 at 04:54

Nikhil

6,493
10
31
68

1

This approach will only work if data has more keys and is the primary object to compare to. – Ari Seyhun Sep 12 '19 at 05:01
1

This is exactly what I've been looking for. Thanks a ton! – aestheticode Sep 12 '19 at 05:03
1

@Acidic - That is what is asked by OP. And the object comparing with (`data` here) will always be the superset. – Nikhil Sep 12 '19 at 05:04
Any idea what the benchmarks or performance hit for using lodash.includes instead of prototype.includes? – Erik Grosskurth Jan 28 '22 at 16:30

Ari Seyhun · Answer 2 · 2019-09-12T05:04:36.387

An object oriented approach using reduce.

const obj1 = {
  '48': '{"sid":"48","name":"title 1"}',
  '77': '{"sid":"77","name":"The blahblah title"}',
}

const obj2 = {
  '48': '{"sid":"48","name":"title 1"}',
  '77': '{"sid":"77","name":"The blahblah title"}',
  '83': '{"sid":"83","name":"The blahblah derp"}',
  '87': '{"sid":"87","name":"The derpy title 4"}',
}

const combinedObject = { ...obj1, ...obj2 }

const diff = Object.entries(combinedObject).reduce((acc, [key, value]) => {
  if (
    !Object.values(obj1).includes(value) ||
    !Object.values(obj2).includes(value)
  )
    acc[key] = value

  return acc
}, {})

console.log(diff)

This approach will work with several objects and does not treat one object as the primary one for comparison.

score 5 · Answer 3 · answered Sep 12 '19 at 04:56

You could use Object.prototype.entries and Array.prototype.reduce.

const a = {
    "48": "{\"sid\":\"48\",\"name\":\"title 1\"}",
    "77": "{\"sid\":\"77\",\"name\":\"The blahblah title\"}"
};
const b = {
    "48": "{\"sid\":\"48\",\"name\":\"title 1\"}",
    "77": "{\"sid\":\"77\",\"name\":\"The blahblah title\"}",
    "83": "{\"sid\":\"83\",\"name\":\"The blahblah derp\"}",
    "87": "{\"sid\":\"87\",\"name\":\"The derpy title 4\"}"
};

const c = Object.entries(b).reduce((c, [k, v]) => Object.assign(c, a[k] ? {} : { [k]: v }), {});

console.log(c);

score 2 · Answer 4 · answered Sep 12 '19 at 05:03

You can simply iterate the second object & check if this key exist in first object. If not then in a new object add this key and its value.

let data1 = {
  "48": "{\"sid\":\"48\",\"name\":\"title 1\"}",
  "77": "{\"sid\":\"77\",\"name\":\"The blahblah title\"}"
}
let data2 = {
  "48": "{\"sid\":\"48\",\"name\":\"title 1\"}",
  "77": "{\"sid\":\"77\",\"name\":\"The blahblah title\"}",
  "83": "{\"sid\":\"83\",\"name\":\"The blahblah derp\"}",
  "87": "{\"sid\":\"87\",\"name\":\"The derpy title 4\"}"
}

let newObj = {};

for (let keys in data2) {
  if (!data1[keys]) {
    newObj[keys] = data2[keys]
  }
};

console.log(newObj)

Yosvel Quintero · Answer 5 · 2019-09-14T03:48:31.563

You can use a procedure in which the order of the objects to compare does not matter

Code:

const obj1 = {
  "48": "{\"sid\":\"48\",\"name\":\"title 1\"}",
  "77": "{\"sid\":\"77\",\"name\":\"The blahblah title\"}"
}
const obj2 = {
  "48": "{\"sid\":\"48\",\"name\":\"title 1\"}",
  "77": "{\"sid\":\"77\",\"name\":\"The blahblah title\"}",
  "83": "{\"sid\":\"83\",\"name\":\"The blahblah derp\"}",
  "87": "{\"sid\":\"87\",\"name\":\"The derpy title 4\"}"
}

const getDiffObj = (o1, o2) =>  Object.keys(o1)
    .filter(k => !Object.keys(o2).includes(k))
    .concat(Object.keys(o2).filter(k => !Object.keys(o1).includes(k)))
    .map(k => o1[k] || o2[k])

console.log(getDiffObj(obj1, obj2))
console.log(getDiffObj(obj2, obj1))

JavaScript - Return differences between two Objects?

5 Answers5

Linked