如何在 JavaScript 中的子项之间遍历以从 JSON 创建面包屑 UI

Posted 2023-02-15

【中文标题】如何在 JavaScript 中的子项之间遍历以从 JSON 创建面包屑 UI

【英文标题】：How to Traverse between children in JavaScript to create breadcrumb UI from JSON

【发布时间】：2021-04-13 03:21:08

【问题描述】：

我需要的是从定义面包屑结构的 JSON 创建面包屑。

父/节点>Comm>表单代码>测试菜单

问题

在嵌套的 Json 对象中，parent_id 与 json 对象中的 id 相关。

js代码

        ngOnInit() 
            let data = [];
            let jsonValues = JSON.stringify(this.jasonData1);
            const main_menu_items = JSON.parse(jsonValues);

            var treeNodes = [];

            this.childernNodes = nestedChildrens(main_menu_items.value, 0);

            console.log(this.childernNodes);

            function nestedChildrens(nodes, level) 
              //treeNodes[level] = treeNodes[level] || [];
              var total = 0;

              nodes.children.forEach(node => 
                var ccount = 0;

                if ("children" in node) 
                  var ccount = nestedChildrens(node, total + 1);
                 else 
                  ccount = 1;
                
                // console.log(node.parent_id);

                treeNodes.push(
                  node,
                  tree_node: total
                );

                total += ccount;
              );

              const sorted = Object.values(treeNodes).sort(
                (a, b) => a.node.id - b.node.id
              );
              return sorted;
            
          
        

堆栈闪电战

https://stackblitz.com/edit/angular-tree-node-test-znreuv

欢迎提出任何建议

【问题讨论】：

你到底想达到什么目的？

我需要从嵌套 Json 对象中递归面包屑，其中子 parent_id 与 id 有关系。

【参考方案1】：

创建一个由 id 索引的节点字典，然后从叶节点开始跟随 parent_id 并从您在开始时创建的字典中获取父节点。随着您的进行，将节点附加到表示面包屑的数组的开头

类似：

在穿越时：

        nodesDictionary[node.id] = 
          node,
          tree_node: total
        ;

然后：

    let currentNode = nodesDictionary["156"];
    while (currentNode && currentNode.node.parent_id) 
      this.childernNodes = [currentNode, ...this.childernNodes];
      currentNode = nodesDictionary[currentNode.node.parent_id];
    

https://stackblitz.com/edit/angular-tree-node-test-hphtlw?file=src/app/app.component.ts

【讨论】：

感谢您的帮助.. 请您帮忙&我需要这个输出 Parent / Node >Comm> Forms Code>Test Menu

@afeef 您的节点中不存在“父/节点”...您可以将其添加到集合中或静态添加到组件标记中。我将它添加到链接 stackblitz 的组件标记中，并将分隔符更改为“>”而不是“/”。检查 tree.component.css 和 tree.component.html

感谢回复 jasonData1 = key: "1", value: id: "150", code: "p", name: "Parent / Node", parent_id: null, url: "parent-url", children: [ 这已经是 json Object 中的根元素

你是对的 :) 修复它以使用根节点