js將資料轉成樹形結構

2021-10-09 02:04:27 字數 910 閱讀 3788

有如下資料，陣列中為一條條單個資料，每條資料都有唯一的id標識，pid表示此條資料的父級 id，根據pid和id的對應關係，實現乙個函式將資料轉成樹形結構資料。

var data = [


,  ,


,  ,


, ,  ,


,  ];
思路：根據 id 唯一這一條件，可先使用 物件或者map結構 （名為obj）將資料儲存起來，鍵名就為 id，值為對應資料，然後遍歷當前陣列，每條記為list，根據 pid ，在 obj 中找到 鍵為 pid 的資料 parentlist，如果parentlist不存在，說明當前資料是根結點（pid為-1或者沒有匹配的id），將list直接存入結果陣列res（初始res為空）;如果存在，說明當前資料 parentlist 是一條父節點資料，檢查它是否包含『children』字段，如果有，直接將list插入；如果沒有，定義 parentlist['children'] 為空陣列，將list插入。最後res即為所求。

**實現：

function totree(data) , // 使用物件重新儲存資料


res = , // 儲存最後結果


len = data.length


// 遍歷原始資料data，構造obj資料，鍵名為id，值為資料


for (let i = 0; i < len; i++) 


// 遍歷原始資料


for (let j = 0; j < len; j++) 


// 將子節點插入 父節點的 children 欄位中


parentlist['children'].push(list)


} else 


}  return res


}
轉換後結果如下：

行資料結構轉成樹形資料結構

背景 在前後端開發過程中，後端負責提供介面資料，有時前端需要把介面資料轉成其他的格式，本文就用於將具備父子邏輯的行資料轉成樹形結構。如下 function rowdatatotreedata roottreenode,rowdata else i i 1 if roottreenode.childr...

js普通list集合轉成樹形集合

普通list集合 轉為 樹形集合 普通list集合轉成樹形集合 param data list集合 param idfield 子節點欄位名 param parentfield 父節點欄位名 param topvalue 最頂級父節點字段值 如 0 1 1 parsetreedata data,id...

js處理樹形結構資料過濾

最近專案經常遇到後台介面返回整個樹形結構，而前端展示只需要展示部分型別的資料，需要過濾一下，所以整理了乙個過濾方法。非層級結構時過濾非常簡單，只需要一層 就夠了 export function filtertree tree 而要做到子節點也過濾時就需要用到遞迴去過濾 思路梳理 迴圈陣列，然後過濾資...