JavaScript: ¿devolver diferencias entre dos objetos?

object

Question

¿Alguien puede mostrarme cómo devolver los datos nuevos al comparar algo como esto? usando JavaScript vainilla.

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

comparado con esto

{
    "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/"}"
}

debería devolver solo las diferencias.

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

Answer 1

Puede usar Object.keys() y Array.includes() para hacer eso.

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

Answer 2

Puede usar Object.prototype.entries y 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);

Answer 3

Puede usar un procedimiento en el que no importa el orden de los objetos a comparar

Código:

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

Answer 4

Simplemente puede iterar el segundo objeto y verificar si esta clave existe en el primer objeto. De lo contrario, en un nuevo objeto, agregue esta clave y su valor.

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)

Answer 5

Un enfoque orientado a objetos usando 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)

Este enfoque funcionará con varios objetos y no trata un objeto como el principal para la comparación.