zoukankan      html  css  js  c++  java
  • JavaScript通过父节点ID递归生成JSON树

    JavaScript通过父节点ID递归生成JSON树:
    · 实现思路:通过递归实现(第一次递归的时候查询出所有的父节点,然后通过当前父节点id不断地去查询所有子节点,直到递归完毕返回)
     
    · 代码示例:
    // 模拟数据
    const ary = [
        { id: '1', name: '11', parent_id: '' },
        { id: '2', name: '22', parent_id: '' },
        { id: '3', name: '33', parent_id: '' },
        { id: '11', name: '11-11', parent_id: '1' },
        { id: '12', name: '11-12', parent_id: '1' },
        { id: '21', name: '22-21', parent_id: '2' },
        { id: '31', name: '33-31', parent_id: '3' },
    ]
    
    /**
     * 递归通过父节点ID生成树结构
     * 思路:
     *      1. 第一次递归的时候查询出所有的父节点
     *      2. 然后通过当前父节点id不断地去查询所有子节点,直到递归完毕返回
     * @param {String} pid 父节点id
     */
    function getTrees(pid='') {
        if(!pid) {
            // 如果没有父id(第一次递归的时候)将所有父级查询出来
            return ary.filter(item => !item.parent_id).map(item => {
                // 通过父节点ID查询所有子节点
                item.children = getTrees(item.id)
                return item
            })
        } else {
            return ary.filter(item => item.parent_id === pid).map(item => {
                // 通过父节点ID查询所有子节点
                item.children = getTrees(item.id)
                return item
            })
        }
    }
    
    console.log(getTrees()) 
    /** 输出:
     * [{
     *  id: "1",
     *  name: "11",
     *  parent_id: 0,
     *  children: [
     *    {
     *      id: "11",
     *      name: "11-11",
     *      parent_id: '1',
     *    }
     *  ]
     * },......]
    */
    

      

    -- 有志者自有千计万计,无志者只感千难万难。 --

  • 相关阅读:
    Struts2 helloWorld
    Python学习笔记基础汇总部分
    从控制台读入,典型的装饰者模式
    随机数产生方法小知识点
    Struts2基础知识
    面向对象原则之GOF是招式,九大原则才是精髓
    静态工厂方法
    单例模式singleton
    J2SE基础夯实系列之JDBC,链接数据库实例代码
    Ubuntu 12.04 下安装ssh 服务遇到的问题以及总结
  • 原文地址:https://www.cnblogs.com/jingxuan-li/p/14769298.html
Copyright © 2011-2022 走看看