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, Dec 02 '20 at 16:10
so you just want to change the images array, as in the `children array` where title is images, correct? — rags2riches-prog, Dec 02 '20 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, Dec 02 '20 at 16:20
@rags2riches yes i want to change the children array in the images object "dynamically" — Praveen kumar, Dec 02 '20 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, Dec 02 '20 at 16:25
@ahmedosama is there any example for dynamically changing values inside array of objects. Any references? — Praveen kumar, Dec 02 '20 at 16:34
Changing a value is easy. `ref.children = something;` Obtaining a reference to a deep-nested child node from a "path" string or array is covered [here](https://stackoverflow.com/questions/6491463/accessing-nested-javascript-objects-and-arrays-by-string-path) — James, Dec 02 '20 at 16:38
Did you check if the answer provided helps you solving the issue? — rags2riches-prog, Dec 03 '20 at 10:03
@rags2riches it works need to add some changes, but the logic is correct Thank you :) — Praveen kumar, Dec 03 '20 at 15:16

score 2 · Accepted Answer · answered Dec 02 '20 at 18:46

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.

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

1 Answers1