how to get the difference between two arrays of objects and merge in a single object?

two array of objects

const befor = [
  {
    one: "123",
    two: "124",
    three: "127",
  },
];

const after = [
  {
    one: "123",
    two: "125",
    three: "128",
  },
];

We get the changed value only from the two array

let newChanges = Object.keys(befor[0]).map(
  (item) => befor[0][item] !== after[0][item] && { [item]: after[0][item] }
);

console.log(newChanges)

output:

We do not need the **boolean **value here.
Don't worry about it.
I will tell you about this later.

let result = Object.assign({}, ...newChanges);
console.log(result)

now output:

{ two: '125', four: '130' }

WHF?

Object.assign( ) create an Object.
This requires key and value.

But Boolean value is a value of one.

Therefore Object.assign( ) does not recognize the boolean value

But I can not say this is the right reason 😅

another solution

newChanges = newChanges.filter(Boolean)
console.log(newChanges);

output:

what happen?

The filter method filters out all the values that return false when passed to a function.
When you use filter and pass a Boolean constructor.

read about it👀

full Code here 👨‍💻:


const befor = [
  {
    one: "123",
    two: "124",
    three: "128",
    four: "132",
  },
];

const after = [
  {
    one: "123",
    two: "125",
    three: "128",
    four: "130",
  },
];

let newChanges = Object.keys(befor[0]).map(
  (item) => befor[0][item] !== after[0][item] && { [item]: after[0][item] }
);

newChanges = newChanges.filter(Boolean)
// console.log(newChanges);

let result = Object.assign({}, ...newChanges);
console.log(result);

Array of Object Manipulation in JavaScript