最簡便的list數據轉樹形結構方法（遞歸詳細）

後臺返回數據是一行一行的，但是前端展示要樹形結構數據，所以需要我們自己處理函數了，小編在此獻醜了，小寫一個簡便函數供大家參考，希望反饋一下。

返回數據格式 :

var list = [

{ name: '根目錄1' , id: 1, parentId: 0 }, 

{ name: '根目錄2' , id: 2, parentId: 0 }, 

{ name: '目錄1-1' , id: 3, parentId: 1 },

{name: '目錄1-2' , id: 4, parentId: 1 },

{name: '目錄2-1' , id: 5, parentId: 2 },

{name: '目錄1-2-1' , id: 6, parentId: 4 }

];

看到數據格式，大家很明白，name用來顯示的，id是唯一值，parentId是父目錄的id，而且第一級的父id爲0；所以根據這個我們就可以組裝了，函數如下

 

function arrayToTree(arr, parentId) {

     //  arr 是返回的數據  parendId 父id

    let temp = [];

    let treeArr = arr;

    treeArr.forEach((item, index) => {

        if (item.parentId == parentId) {

            if (arrayToTree(treeArr, treeArr[index].id).length > 0) {

                 // 遞歸調用此函數

              treeArr[index].children = arrayToTree(treeArr, treeArr[index].id);

            }

            temp.push(treeArr[index]);

        }

   });

   return temp;

}

console.log(arrayToTree(list , 0));   // 第一級的父目錄id是0；寫死調用

// [{ name: ‘根目錄1’ , id: 1: parentId: 0 , children:[{ name: ‘目錄1-1’ , id: 3: parentId: 1 },{ name: ‘目錄1-2’ , id: 4: parentId: 1              , children:[{name: ‘目錄1-2-1’ , id: 6, parentId: 4 }]}]}, 

    { name: ‘根目錄2’ , id: 2: parentId: 0 , children:[{ name: ‘目錄2-1’ , id: 5: parentId: 2 } ]}

]