I need to create a breadcrumb config list, depending on which item the user has clicked on in a list.
The items are listed as a sort of expandable table, where the user can click the name, then it expands with its children, then if the user clicks the deeper item, the same thing happens, etc.
Then if, for example, the user clicks on the sub level 3-1 breadcrumb, it should look like this:
Root level > sub level 1-1 > sub level 2-1 > sub level 3-1
or if the user clicks sub level 1-3, it should be:
Root level > sub level 1-3
What I got is the Id of the clicked item and the root level object.
I need to find in which place the item is, then loop up from its index to "Root level", collecting Name and Id on the way, creating a breadCrumbArry; something like this:
[
{
id:"1-1"
name: "sub level 1-1"
},
{
id:"2-1"
name: "sub level 2-1"
},
{
id:"3-1"
name: "sub level 3-1"
}
]
I've tried many different things, like flatten it and looping through it, collecting data on the way, but can't come up with a working solution. Now my brain has stopped functioning.. :) and a little help would be much appreciated.
The nested array looks like this and can have any depth:
{
Id: 1,
Name:"Root level",
Children: [
{
Id: 1,
Name:"sub level 1-1",
Children: [
{
Id: 1,
Name:"sub level 2-1",
Children: [
{
Id: 1,
Name:"sub level 3-1",
Children: []
},
]
},
]
},
{
Id: 2,
Name:"sub level 1-2",
Children: []
},
{
Id: 3,
Name:"sub level 1-3",
Children: []
},
]
}
I didn't quite get how the id properties are derived in the output, but it looks like the concatenation of depth (level in the tree) and the node's own id value.
You would perform a depth first traversal through the whole menu. I assume there is in general no clue in the name of the target element that tells you anything about its location in the menu. So a full traversal may be needed. Then when you have a hit, start tracking back out of recursion, building the breadcrumb during this process.
function pathTo(menu, name, depth=1) {
if (menu.Name === name) return [];
for (let submenu of menu.Children) {
let result = pathTo(submenu, name, depth+1);
if (result) {
return [{
id: `${depth}-${submenu.Id}`,
name: submenu.Name
},
...result];
}
}
}
let menu = {Id: 1,Name:"Root level",Children: [{Id: 1,Name:"sub level 1-1",Children: [{Id: 1,Name:"sub level 2-1",Children: [{Id: 1,Name:"sub level 3-1",Children: []},]},]},{Id: 2,Name:"sub level 1-2",Children: []},{Id: 3,Name:"sub level 1-3",Children: []},]};
let result = pathTo(menu, "sub level 3-1");
console.log(result);