dynamically merging(override) 2 javascript objects

Question

I have 2 objects .

userprofile = {
  id: 1,
  email: hello @gmail.com,
  user: {
    id: 1,
    username: test,
  }

}

userprofile2 = {
  email: bye @gmail.com,
  user: {
    username: testtest,
  }
}

What i wish to do is to merge userprofile and userprofile2 , or in a sense using userprofile2 to override userprofile.

Here is what i wish to obtain:

updatedprofile = {
  id: 1,
  email: bye @gmail.com,
  user: {
    id: 1,
    username: testtest,
  }
}

The application for this problem is because i have an update form which uses redux saga . The change in data is userprofile2 while the previous data is userprofile.

Is there a simple efficient way to do this?

score 0 · Answer 1 · edited Jun 29 '20 at 17:56

0

You could use the spread operator. As the ... operator only performs a shallow merge, you will have to spread the nested user property as well.

const userprofile = {
  id: 1,
  email: "hello @gmail.com",
  user: {
    id: 1,
    username: "test",
  }

}

const userprofile2 = {
  email: "bye @gmail.com",
  user: {
    username: "testtest",
  }
}

const updatedProfile = {
   ...userprofile,
   ...userprofile2,

   user: {
     ...userprofile.user,
     ...userprofile2.user,
   }
};

console.log(updatedProfile)

edited Jun 29 '20 at 17:56

Ramesh Reddy

9,107
3
12
28

answered Jun 29 '20 at 17:23

Sushanth --

54,565
8
62
98

Shouldn't you also spread `userprofile.user` and `userprofile2.user`? – Ramesh Reddy Jun 29 '20 at 17:37
It is already being done. – Sushanth -- Jun 29 '20 at 17:38
Your code doesn't produce OP's required output. – Ramesh Reddy Jun 29 '20 at 17:39
In fact, it throws an error – Ramesh Reddy Jun 29 '20 at 17:41
That is because, the OP has not enclosed the value in quotes ( email and username) – Sushanth -- Jun 29 '20 at 17:41
Yeah, that's one error but your code still doesn't work. Try to execute it. – Ramesh Reddy Jun 29 '20 at 17:44
included a snippet – Sushanth -- Jun 29 '20 at 17:52
Now it works because you're spreading the `userprofile.user` and `userprofile2.user`. Previously you were not doing that. – Ramesh Reddy Jun 29 '20 at 17:55
oh right. My bad. – Sushanth -- Jun 29 '20 at 17:57

dynamically merging(override) 2 javascript objects

1 Answers1