An algorithm for expanding nodes in the location tree after page refresh

  1. directory tree initialization initially returns only a two-tier structure. 
[
    {
      name: "",
      path: "/",
      id: 1,
      childs: 2,
      children: [
        {
           name: "01",
           path: "/01/",
           id: 2,
           childs: 2,
           children:null
        },
        {
           name: "02",
           path: "/02/",
           id: 3,
           childs: 1,
           children:null
        },
      ]
    }
]

when a node is clicked, it is expanded by whether the id and childs clicked are the child nodes under the current node 0 and add expanded: true,.
now the opening path is path: "all / first-level menu 01 / second-level menu 02 / third-level menu 04" how to match to all / first-level menu 01 / in the initialization directory tree through this path. Get children, through id to match all / first-level menu 01 / second-level menu 02 / get children, through id Match all / level 1 menus 01 / level 2 menus 02 / level 3 menus 04 in children, and expand it?

the idea is to use the path all / level 1 menus 01 / level 2 menus 02 / level 3 menus 04 to include Path in the first level matching tree.
Thank you.

Algorithm javascript
Nov.11,2021 
//
let arrOrigin = [{
    name: "",
    path: "/",
    id: 1,
    childs: 2,
    children: [
        {
            name: "01",
            path: "/01/",
            id: 2,
            childs: 2,
            children: null
        },
        {
            name: "02",
            path: "/02/",
            id: 3,
            childs: 1,
            children: null
        },
    ]
}];

//
let path = "/01/02/04";

let arrPath = path.split("/");
console.log(arrPath); //

//
function render(arrOrigin, arrPath) {
    if (arrPath.length > 0) {
    //

        //
        let currentNode = arrPath.shift();

        arrOrigin.forEach(element => {
            if (element.name == currentNode) {
                // name  expanded
                element.expanded = true;
                if (element.childs > 0 && element.children) {
                    //
                    return render(element.children, arrPath);
                }
            }
        });
    }
}


render(arrOrigin, arrPath);

//
console.log(JSON.stringify(arrOrigin, null, 4));

output: 

[ '', '01', '02', '04' ]
[
    {
        "name": "",
        "path": "/",
        "id": 1,
        "childs": 2,
        "children": [
            {
                "name": "01",
                "path": "/01/",
                "id": 2,
                "childs": 2,
                "children": null,
                "expanded": true
            },
            {
                "name": "02",
                "path": "/02/",
                "id": 3,
                "childs": 1,
                "children": null
            }
        ],
        "expanded": true
    }
]

Previous: How js traverses an array of arbitrary levels at any depth and converts it into html fragments

Next: Vue-cli3 import external JS file error

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3ada7-2b793.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3ada7-2b793.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?