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

  

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

posted @ 2021-05-14 17:14  C+V-Engineer  阅读(616)  评论(0编辑  收藏  举报