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',
     *    }
     *  ]
     * },......]
    */
    

      

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

  • 相关阅读:
    单点登录学习的教程
    单点登录
    Linux下VI的使用
    伪分布式下的hadoop简单配置
    Linux下配置Java环境变量
    spring mvc 重新定向到一个新的Url
    LeetCode --- 字符串系列 ---“气球” 的最大数量
    http 简述
    dpr 与 移动端 1px 问题
    rem 与 vm 布局
  • 原文地址:https://www.cnblogs.com/jingxuan-li/p/14769298.html
Copyright © 2011-2022 走看看