使用js将后台返回的数据转换成树形结构

Posted senf

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用js将后台返回的数据转换成树形结构相关的知识,希望对你有一定的参考价值。

原文地址:https://www.cnblogs.com/wjs0509/p/11082850.html

var list = [

{ id: 1, name: \'1\'`},`

{ id: 2, name: \'2\'`},`

{ id: 3, parentId: 1, name: \'1.3\'`},`

{ id: 4, parentId: 1, name: \'1.4\'`},`

{ id: 5, parentId: 3, name: \'1.3.5\'`}`

];

var tree = [{

id: 1,

name: \'1\'`,`

children: [{

id: 3,

parentId: 1,

name: \'1.3\'`,`

children: [{

id: 5,

parentId: 3,

name: \'1.3.5\'

}]

}, {

id: 4,

parentId: 1,

name: \'1.4\'

}]

}, {

id: 2,

name: \'2\'`,`

children: null

}];

/**

* 该方法用于将有父子关系的数组转换成树形结构的数组

* 接收一个具有父子关系的数组作为参数

* 返回一个树形结构的数组

*/

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

}

console.log(translateDataToTree(list), tree)

以上是关于使用js将后台返回的数据转换成树形结构的主要内容,如果未能解决你的问题,请参考以下文章

后台获取数据,前端js转换成固定格式的json?

js将有父子关系的数据转换成树形结构数据

js返回树形结构数据

组织架构树形图

尚筹网项目 五后台 菜单维护

js 实现将扁平化数据转换为渲染树形结构所需的数据