DEV Community

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

Posted on

5 3

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.

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here β†’

Top comments (1)

Collapse
 
jacksonkasi profile image
Jackson Kasi β€’

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 😊

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more