將類似如下數據轉換成樹形的數據：

[{ id: 1, name: '1', },{ id: 2, name: '1-1', parentId: 1 },{ id: 3, name: '1-1-1', parentId: 2 },{ id: 4, name: '1-2', parentId: 1 },{ id: 5, name: '1-2-2', parentId: 4 },{ id: 6, name: '1-1-1-1', parentId: 3 },{ id: 7, name: '2', }]

?

轉換方法為：

function translateDataToTree(data) {let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)let children = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)let translator = (parents, children) => {parents.forEach((parent) => {children.forEach((current, index) => {if (current.parentId === parent.id) {let temp = JSON.parse(JSON.stringify(children))temp.splice(index, 1)translator([current], temp)typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]}})})}translator(parents, children)return parents }

?

轉換后數據是：

[{"id": 1,"name": "1","children": [{"id": 2,"name": "1-1","parentId": 1,"children": [{"id": 3,"name": "1-1-1","parentId": 2,"children": [{"id": 6,"name": "1-1-1-1","parentId": 3}]}]},{"id": 4,"name": "1-2","parentId": 1,"children": [{"id": 5,"name": "1-2-2","parentId": 4}]}]},{"id": 7,"name": "2"} ]

思路：將有父子關系的數組數據先分為兩類，一類是沒有父節點的數據(取個別名parents)，另一類是有父節點的數據(取個別名children)，然后通過遍歷parents,對每一個父節點在children查找對應的子節點,并將其放入父節點的children中(這里我的是以children表示子節點)，然后每個子節點又作為一個父節點來重復之前的動作。（可能這里描述的不太清楚，下面我將對方法進行注釋說明）

/*** 該方法用于將有父子關系的數組轉換成樹形結構的數組* 接收一個具有父子關系的數組作為參數* 返回一個樹形結構的數組*/ function translateDataToTree(data) {//沒有父節點的數據let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)//有父節點的數據let children = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)//定義轉換方法的具體實現let translator = (parents, children) => {//遍歷父節點數據parents.forEach((parent) => {//遍歷子節點數據children.forEach((current, index) => {//此時找到父節點對應的一個子節點if (current.parentId === parent.id) {//對子節點數據進行深復制，這里只支持部分類型的數據深復制，對深復制不了解的童靴可以先去了解下深復制let temp = JSON.parse(JSON.stringify(children))//讓當前子節點從temp中移除，temp作為新的子節點數據，這里是為了讓遞歸時，子節點的遍歷次數更少，如果父子關系的層級越多，越有利temp.splice(index, 1)//讓當前子節點作為唯一的父節點，去遞歸查找其對應的子節點 translator([current], temp)//把找到子節點放入父節點的children屬性中typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]}})})}//調用轉換方法 translator(parents, children)//返回最終的結果return parents }

?

?

轉載于:https://www.cnblogs.com/wjs0509/p/11082850.html

總結

以上是生活随笔為你收集整理的使用js将后台返回的数据转换成树形结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。