將類似如下數(shù)據(jù)轉(zhuǎn)換成樹形的數(shù)據(jù)：

[{ 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', }]

?

轉(zhuǎn)換方法為：

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 }

?

轉(zhuǎn)換后數(shù)據(jù)是：

[{"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"} ]

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

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

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/wjs0509/p/11082850.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。