In my project, I am dealing with a multidimensional array that represents a deep category tree menu. The structure of the array looks like this:
this.tree = [{
"title": "1. dragon-breath",
"items": []
}, {
"title": "2. moiré-vision",
"items": [{
"title": "2.1. tofu-animation",
"items": [{
"title": "2.1.1. spooky-giraffe",
"items": []
}, {
"title": "2.1.2. bubble-burst",
"items": []
}],
}, {
"title": "2.2. barehand-atomsplitting",
"items": []
}],
}, {
"title": "3. unicorn-zapper",
"items": []
}, {
"title": "4. romantic-transclusion",
"items": []
}];
Alongside this array, I have another array called path which points to a specific leaf on the tree. This path can change dynamically over time. For example, it may look like this:
var path = [0]
or like this:
var path = [1][1]
or maybe even like this:
var path = [1][0][1]
Now, the challenge is to update the title attribute of the leaf specified by this path. I have attempted using the eval function as follows:
eval('tree'+getStringPathByArrayPath([1,0,1])+'.name = "'+updatedName+'"')However, I am aware that using eval is not considered best practice and could be problematic if used repeatedly. Also, since I am using this function in an angular ng-model context, I want to avoid unnecessary evaluations by the browser.
Is there a better approach to solve this issue? Or am I approaching it incorrectly?
PS: I have tried iterating over the path array recursively to access the correct tree node, but encountered issues with referencing and making changes to the original node without creating copies.
Thank you for your assistance.