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

　　

-- 有志者自有千計萬計,無志者只感千難萬難。 --