How to implement a tree directory with javascript recursion?

I"m trying to implement a tree table using JavaScript, but I can"t solve this problem.

one
  two
     five
     six
  three
  four
      seven

do you think the above effect can be achieved?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <title>Document</title>
</head>
<body>
    <script>
        var data = [{
            id: 1,
            name: "one",
            pid: 0,
            level: 0,
            children: [{
                    id: 2,
                    name: "two",
                    pid: 1,
                    level: 1,
                    children: [{
                            id: 3,
                            name: "five",
                            pid: 2,
                            level: 2,
                            children: []
                        },
                        {
                            id: 4,
                            name: "six",
                            pid: 2,
                            level: 2,
                            children: []
                        }
                    ]
                },
                {
                    id: 5,
                    name: "three",
                    pid: 1,
                    level: 1,
                    children: []
                },
                {
                    id: 6,
                    name: "four",
                    pid: 1,
                    level: 0,
                    children: [{
                        id: 7,
                        name: "seven",
                        pid: 6,
                        level: 2,
                        children: []
                    }]
                }
            ]

        }];

        
        var icon = new Array(" ", " ", " ");

       
        function treeA(data) {
            var str = "";
            var childPrefix = "";
            for (var i = 0; i < data.length; iPP) {

                console.log(data[i].name);
                var node = data[i].children;
                childTree(node);
    
            }
        }
        function childTree(node) {
         
            for(var i = 0; i<node.length; iPP) {
               
                   var child = node[i];
                   
                    if(i<node.length-1){
                            console.log(icon[1]+child.name);  
                    } else {
                            console.log(icon[2]+child.name);
                    }
               
                    if(jQuery.isArray(child.children)){  
                             
                        childTree(child.children);
                    }
                 
                }
        }
        $(function () {
            treeA(data);
        });
    </script>
</body>
</html>

console.log prints out the result:

one
 two
 five
 six
 three
 four
 seven

this result is wrong, it should follow the above effect.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script> <title>Document</title> </head> <body> <script> var data = [{ id: 1, name: "one", pid: 0, level: 0, children: [{ id: 2, name: "two", pid: 1, level: 1, children: [{ id: 3, name: "five", pid: 2, level: 2, children: [] }, { id: 4, name: "six", pid: 2, level: 2, children: [] } ] }, { id: 5, name: "three", pid: 1, level: 1, children: [] }, { id: 6, name: "four", pid: 1, level: 0, children: [{ id: 7, name: "seven", pid: 6, level: 2, children: [] }] } ] }]; var icon = new Array(' ', ' ', ' ',); function treeA(data,deep) { for (var i = 0; i < data.length; iPP) { var _deep = deep; var _prefix = (new Array(_deep)).join(icon[0]); if (_deep === 0) { console.log(data[i].name); } else { if (i < data.length - 1) { console.log(_prefix + icon[1] + data[i].name); } else { console.log(_prefix + icon[2] + data[i].name); } } if (data[i].children && data[i].children.length > 0) { _deep PP; treeA(data[i].children,_deep) } else{ _deep --; } } } $(function () { treeA(data,0); }); </script> </body> </html>