How to deep merge objects in react js

Question

{"activities": [
                {
                    "actor": {
                        "id": 409,
                        "avatar": "",
                        "first_name": "Sakthi",
                        "last_name": "Vel",
                        "headline": null,
                        "is_online": false,
                    },
                    "foreign_id": "post.UsPost:253",
                    "id": "ed50e218-f3e8-11e8-8080-800132d8e9c0",
                    "object": {
                        "id": 253,
                        "comments": 0,
                        "likes": 0,
                        "files": [
                            {
                                "id": 112,
                                "file": "",
                                "content_type": "video/mp4",
                                "file_type": "video",
                                "created_at": "2018-11-29T15:10:38.524836Z"
                            }
                        ],
                        "post_type": "post",
                        "is_bookmarked": false,
                        "is_liked": false,
                        "link": "/post/api/v1/253/",
                        "target": "post.UsPost:253",
                        "foreign_id": "post.UsPost:253",
                        "actor": {
                            "id": 409,
                            "avatar": "",
                            "first_name": "Sakthi",
                            "last_name": "Vel",
                            "headline": null,
                            "is_online": false,
                        },
                        "text": "#Multiple video (.mp4) test. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.",
                        "skills": [
                            "VFX"
                        ],
                        "created_at": "2018-11-29T15:10:37.426332Z",
                        "is_link": true,
                        "view_count": 0,
                        "created_by": 409
                    },
                    "origin": "user:409",
                    "target": "",
                    "time": "2018-11-29T15:10:37.426332",
                    "type": "post",
                    "verb": "posted"
                }
                
                
           {
            "activities": [
                {
                    "actor": {
                        "id": 64,
                        "last_name": "",
                        "headline": "Learning is my Passion",
                        "is_online": false,
                        "username": "Uchenna1"
                    },
                    "foreign_id": "post.UsPost:183",
                    "id": "447f6710-eb08-11e8-8080-8001369e78cd",
                    "object": {
                        "id": 183,
                        "comments": 1,
                        "likes": 1,
                        "files": [
                            {
                                "id": 87,
                                "content_type": "image/jpg",
                                "file_type": "image",
                                "created_at": "2018-11-18T08:02:18.759309Z"
                            }
                        ],
                        "post_type": "post",
                        "is_bookmarked": false,
                        "is_liked": false,
                        "link": "/post/api/v1/183/",
                        "target": "post.UsPost:183",
                        "foreign_id": "post.UsPost:183",
                        "actor": {
                            "id": 64,
                            "first_name": "Uchenna",
                            "last_name": "",
                            "headline": "Learning is my Passion",
                            "is_online": false,
                            "username": "Uchenna1"
                        },
                        "text": "This is codigo",
                        "skills": [
                            "Javascript"
                        ],
                        "created_at": "2018-11-18T08:02:17.626600Z",
                        "is_link": true,
                        "view_count": 10,
                        "created_by": 64
                    },
                    "origin": "user:64",
                    "target": "",
                    "time": "2018-11-18T08:02:17.626600",
                    "type": "post",
                    "verb": "posted"
                }
            ],
            "activity_count": 1,
            "actor_count": 1,
            "created_at": "2018-11-18T08:02:18.647108",
            "group": "posted_2018-11-18",
            "id": "451b1eab-eb08-11e8-8080-80007915e2b6.posted_2018-11-18",
            "is_read": false,
            "is_seen": true,
            "updated_at": "2018-11-18T08:02:18.647108",
            "verb": "posted"
        }

I am facing issue in merging two object. Below is the snap of two object and result.

Here in the above image I wan to merge Old Data and new Data

but after merging getting wrong output i.e new updated data.

I am using command to do it.

let newData = { ...a , ...b }

 console.log('new updated data: ',newData)

also I am performing this operation in redux action before dispatching.

Here {"activities": [....],....} is one object and I want to merge with the below one.

Please provide a [mcve] that reproduces problem. That image is useless for us to run your code and we have no idea what `a` or `b` are — charlietfl, Nov 29 '18 at 14:46
You should tell us, what are a and b and what is your expected output. And don't post all of your a and b. Only the relevant parts — yunzen, Nov 29 '18 at 14:50
Please. post it in a form that we can use it directly in JavaScript. Copying the output from developer tools doesn't help — yunzen, Nov 29 '18 at 14:59
I am not sufficiently interested to read through a bunch of extraneous code, but note that you have reference properties in your object and `const foo = {...bar, ...baz}` only copies *shallowly*. — Jared Smith, Nov 29 '18 at 15:30
please help me to achieve this. Is there any other way to do this ? — Jasham, Nov 29 '18 at 15:33
Possible duplicate of [What is the most efficient way to deep clone an object in JavaScript?](https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript) — Jared Smith, Nov 29 '18 at 16:46

score 0 · Answer 1 · answered Nov 29 '18 at 14:46

0

Can you clarify do your objects have a child that are objects or arrays and if you mean it's not merging those things or is it not merging anything at all?

for e.g:

let oldData = {
      key: value, 
      key1: { childkey1: value1 }
}

if you have something like this and the problem is like I explained. It's because javascript doesn't do deep merge. it does a shallow merge.

Easiest option would be use a library like lodash that has a function for deep merge.

answered Nov 29 '18 at 14:46

Shiva Pandey

645
6
17

Exactly object is having child as object also arrays. – Jasham Nov 29 '18 at 15:35
Then you should use something like lodash. Try looking for deep merge. – Shiva Pandey Nov 29 '18 at 16:36

How to deep merge objects in react js

1 Answers1