Replace Nested Object with Map

Question

I am trying to replace a nested object with an updated object with map. However, it only works if I replace each property but I cannot replace the entire object with the updated one. The following is my strucutre:

[
    {
        name: 'Parent 1',
        data: [
            {
                id: 1,
                name: 'Child 1', 
                // more properties ...,
            },
            {
                id: 2,
                name: 'Child 2', 
                // more properties ...
            }
        ]
    }
]

Now I want to replace a child in its parent with an updated child. This is what I have right now and it works but it isn't maintainable to map each property manually:

    parents.map(parent =>
        parent.data.map(child => {
            if (child.id === newChild.id) {
                child.name = newChild.name;
                // more mappings ...
            }
        })
    );

This is what doesn't work but the solution I would prefer:

    parents.map(parent =>
        parent.data.map(child => {
            if (child.id === newChild.id) {
                child= newChild;
            }
        })
    );

I am also open to other solutions rather than using map. I am not sure if this is the correct way of doing it.

Post the result you are expecting... And i'm am almost sure map is not a way to go to "replace" anything in object... — ikiK
– ikiK, Commented Mar 18, 2021 at 1:56

a.mola · Accepted Answer · 2021-03-18 02:13:25Z

1

I don't know where the newChild is coming from, but...

If you want to replace that whole child, you have to use its index. Like so,

parents.forEach(parent => parent.data.forEach((child, index) => {
    if (child.id == newChild.id) child.data[index] = newChild;
}));

If not , you are just changing the value of the variable child in that loop.

I changed the map to forEach since I assume you want to edit the original array. Use this

parents = parents.map(parent => parent.data.map((child, index) => (child.id == newChild.id) ? newChild : child));

This way, the new child will take this space of the old one in the map if their ids match else the old child will still be returned

edited Mar 18, 2021 at 2:13

answered Mar 18, 2021 at 1:58

a.mola

4,0119 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tom el Safadi Over a year ago

Thanks! The first approach works with the forEach loop. The second approach is what I have also tried but it doesn't work. That is what I am confused about.

a.mola Over a year ago

The map doesn't mutate the array. If you want to use map, you still have to assign a variable to it

Tom el Safadi Over a year ago

I have tried your first approach and the second approach. The first approach works perfectly, the second doesn't. It still returns the old array and nothing is replaced.

a.mola Over a year ago

Did you log out the return value or assign it to a variable?

Tom el Safadi Over a year ago

Damn, I am so stupid! Thanks so much, what you described fixed my issue.

|

Carlos Apolinar Severino Mejia · Accepted Answer · 2021-03-18 16:23:10Z

0

this is your original script, I just add the index of the data array to the map and changed the way to assign the value to child. At this case I assign the newChild to parent.data[index]. This is the code:

parents.map((parent) =>
    parent.data.map((child, itemChild) => {
        if (child.id === newChild.id) {
            parent.data[itemChild] = newChild;
        }
    })
);

answered Mar 18, 2021 at 16:23

Carlos Apolinar Severino Mejia

1

Collectives™ on Stack Overflow

Replace Nested Object with Map

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related