Necesito crear una lista de configuración de migas de pan, según el elemento en el que el usuario haya hecho clic en una lista.
Los elementos se enumeran como una especie de tabla expandible, donde el usuario puede hacer clic en el nombre, luego se expande con sus elementos secundarios, luego, si el usuario hace clic en el elemento más profundo, sucede lo mismo, etc.
Entonces, si, por ejemplo, el usuario hace clic en la ruta de navegación del subnivel 3-1 , debería verse así:
Nivel raíz > subnivel 1-1 > subnivel 2-1 > subnivel 3-1
o si el usuario hace clic en el subnivel 1-3 , debería ser:
Nivel raíz > subnivel 1-3
Lo que obtuve es la identificación del elemento en el que se hizo clic y el objeto de nivel raíz.
Necesito encontrar en qué lugar está el elemento, luego pasar de su índice a "Nivel raíz", recopilar el nombre y la identificación en el camino, creando un breadCrumbArry; algo como esto:
[ { id:"1-1" name: "sub level 1-1" }, { id:"2-1" name: "sub level 2-1" }, { id:"3-1" name: "sub level 3-1" } ]He intentado muchas cosas diferentes, como aplanarlo y recorrerlo, recopilando datos en el camino, pero no puedo encontrar una solución que funcione. Ahora mi cerebro ha dejado de funcionar... :) y un poco de ayuda sería muy apreciada.
La matriz anidada se ve así y puede tener cualquier profundidad:
{ 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: [] }, ] }No entendí bien cómo se derivan las propiedades de id en la salida, pero parece la concatenación de profundidad (nivel en el árbol) y el valor de identificación del nodo.
Realizaría un primer recorrido en profundidad a través de todo el menú. Supongo que, en general, no hay ninguna pista en el nombre del elemento de destino que le diga algo sobre su ubicación en el menú. Por lo tanto, es posible que se necesite un recorrido completo. Luego, cuando tenga un acierto, comience a retroceder fuera de la recursividad, construyendo la ruta de navegación durante este proceso.
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);