DEV Community

Cover image for Array of Object Manipulation in JavaScript
Jackson Kasi
Jackson Kasi

Posted on

Array of Object Manipulation in JavaScript

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",
  },
];

Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

output:

Image description

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)
Enter fullscreen mode Exit fullscreen mode

now output:

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

Image description

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);
Enter fullscreen mode Exit fullscreen mode

output:
Image description

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

Enter fullscreen mode Exit fullscreen mode

result πŸŽ‰:

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

Image description


conclusion 😊

Just wanted to share this with you 😁

If you find another great way to do this don't forget to share here.

Discussion (1)

Collapse
jacksonkasi profile image
Jackson Kasi Author

hello my friend @frezyx

I know you are a flutter developer.
But all the posts I post are about JS or React.
However you do like my posts.
Can you tell me the reason for that?
I look forward to your reply 😊