How to add value to the children in nested array of objects

Question

I have a nested array of objects i need to change the values of a children data dynamically

[
    {
        type: "root",
        title: "FileManager",
        isDirectory: true,
        children: [
            {
                type: "folder",
                title: "animals",
                isDirectory: true,
                children: [
                    {
                        type: "folder",
                        title: "cat",
                        isDirectory: true,
                        children: [
                            {
                                type: "folder",
                                title: "images",
                                isDirectory: true,
                                children: [
                                    {
                                        type: "file",
                                        title: "cat001.jpg",
                                        isDirectory: false,
                                    }, {
                                        type: "file",
                                        title: "cat002.jpg",
                                        isDirectory: false,
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                type : "folder",
                title : 'Birds',
                isDirectory : true,
                children : []
            }
        ]

    }

]

this is my main array of object suppose if i want to change the value of children dynamically. lets take i want to add one more object to the children inside images array so the path of the images array is FileManager / animals / cat / images how can change the value of the children in the images object dynamically?

That's what state is for. You'd better use JSX, though. It's much cleaner — ahmed osama
– ahmed osama, Commented Dec 2, 2020 at 16:10
so you just want to change the images array, as in the children array where title is images, correct? — rags2riches-prog
– rags2riches-prog, Commented Dec 2, 2020 at 16:17
"change the value of the children in the images object dynamically" - that depends what is "dynamically" according to you? Do you want to change the values on a dom event like onclick etc or through another method? — Praneet Dixit
– Praneet Dixit, Commented Dec 2, 2020 at 16:20
@rags2riches yes i want to change the children array in the images object "dynamically" — Praveen kumar
– Praveen kumar, Commented Dec 2, 2020 at 16:22
@PraneetDixit actually its an mini file explorer in my react application whenever i create a new folder or deleting a folder i need to loop and go inside the object and change its children by adding or removing a object — Praveen kumar
– Praveen kumar, Commented Dec 2, 2020 at 16:25

rags2riches-prog · Accepted Answer · 2020-12-02 18:46:01Z

Based on the data structure provided, you can use a recursive solution to reach the nested array you are interested in and then when the recursion hits the base case, you can either push a new object/s into the array at that specific level of depth or use a callback function to push as many new objects into it.

I am not really sure about the "dynamic" part you are referring to, but the following should place you in the right direction:

function rec(array) {
    for (let i in array) {
        if (array[i].children === undefined) { // BASE CASE
            // console.log("base case ", array);

            // push the object you want into the array, as at this point in the
            // recursion you will be at the level you can modify your image array as you like
            return array.push({ "myImage": "myBeautifulCatImage", "does": "poooooor"});
        }

        // recursive call
        // visualise how deep you are going...
        // console.log("rec", array[i].children); 
        return rec(array[i].children); 
    }
}

rec(arr);

// if you know log your arr as in:
// console.log("arr after recursion", rec(arr))
// you will see your new cat showing where it should be :)

If this answer helps you solving the issue, consider accepting the answer or upvoting it. Thanks.

Collectives™ on Stack Overflow

How to add value to the children in nested array of objects

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related