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? — Ari Seyhun
– Ari Seyhun, Commented Sep 12, 2019 at 4:47
They are not multidimensional, they are flat objects. [key: string]: string; — Ari Seyhun
– Ari Seyhun, Commented Sep 12, 2019 at 4:50
Possible duplicate of getting difference object from two objects using es6 — Nick Parsons
– Nick Parsons, Commented Sep 15, 2019 at 1:55
I give really nice answered here: stackoverflow.com/a/71173966/1919821 — pery mimon
– pery mimon, Commented Feb 18, 2022 at 14:18

Nikhil · Accepted Answer · 2019-09-12 05:07:20Z

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, 2019 at 5:07

answered Sep 12, 2019 at 4:54

Nikhil

6,68110 gold badges36 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ari Seyhun Over a year ago

This approach will only work if data has more keys and is the primary object to compare to.

aestheticode Over a year ago

This is exactly what I've been looking for. Thanks a ton!

Nikhil Over a year ago

@Acidic - That is what is asked by OP. And the object comparing with (data here) will always be the superset.

Erik Grosskurth Over a year ago

Any idea what the benchmarks or performance hit for using lodash.includes instead of prototype.includes?

Ari Seyhun · Accepted Answer · 2019-09-12 05:04:36Z

6

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.

edited Sep 12, 2019 at 5:04

answered Sep 12, 2019 at 4:59

Ari Seyhun

12.8k18 gold badges64 silver badges119 bronze badges

Comments

fubar · Accepted Answer · 2019-09-12 04:56:43Z

4

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

answered Sep 12, 2019 at 4:56

fubar

17.4k4 gold badges43 silver badges47 bronze badges

Comments

brk · Accepted Answer · 2019-09-12 05:03:12Z

2

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)

answered Sep 12, 2019 at 5:03

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Yosvel Quintero · Accepted Answer · 2019-09-14 03:48:31Z

1

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

edited Sep 14, 2019 at 3:48

answered Sep 12, 2019 at 5:07

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Collectives™ on Stack Overflow

JavaScript - Return differences between two Objects?

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related