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 blog image

Identify what makes your TTFB high so you can fix it

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

Read more

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 😊

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

AWS GenAI LIVE!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❀️