js递归生成树结构数据

准备源数据如下

{"msg": "操作成功", "code": 200, "data": [{"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:21", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 100, "parentId": 0, "ancestors": "0", "deptName": "中旭科技", "orderNum": "0", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [ ]}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:21", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 101, "parentId": 100, "ancestors": "0,100", "deptName": "深圳总公司", "orderNum": "1", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [ ]}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:21", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 102, "parentId": 100, "ancestors": "0,100", "deptName": "长沙分公司", "orderNum": "2", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [ ]}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:21", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 103, "parentId": 101, "ancestors": "0,100,101", "deptName": "研发部门", "orderNum": "1", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [ ]}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:21", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 104, "parentId": 101, "ancestors": "0,100,101", "deptName": "市场部门", "orderNum": "2", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [ ]}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:22", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 105, "parentId": 101, "ancestors": "0,100,101", "deptName": "深圳部门", "orderNum": "3", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [ ]}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:22", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 106, "parentId": 101, "ancestors": "0,100,101", "deptName": "财务部门", "orderNum": "4", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [ ]}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:22", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 107, "parentId": 101, "ancestors": "0,100,101", "deptName": "运维部门", "orderNum": "5", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [ ]}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:22", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 108, "parentId": 102, "ancestors": "0,100,102", "deptName": "市场部门", "orderNum": "1", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [ ]}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:22", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 109, "parentId": 102, "ancestors": "0,100,102", "deptName": "财务部门", "orderNum": "2", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [ ]}]
}

构建树结构数据方法如下

/*** 构造树型结构数据* @param {*} data 数据源* @param {*} id id字段 默认 'id'* @param {*} parentId 父节点字段 默认 'parentId'* @param {*} children 孩子节点字段 默认 'children'*/
export function handleTree(data, id, parentId, children) {let config = {id: id || 'id',parentId: parentId || 'parentId',childrenList: children || 'children'};var childrenListMap = {};var nodeIds = {};var tree = [];for (let d of data) {let parentId = d[config.parentId];if (childrenListMap[parentId] == null) {childrenListMap[parentId] = [];}nodeIds[d[config.id]] = d;childrenListMap[parentId].push(d);}for (let d of data) {let parentId = d[config.parentId];if (nodeIds[parentId] == null) {tree.push(d);}}for (let t of tree) {adaptToChildrenList(t);}function adaptToChildrenList(o) {if (childrenListMap[o[config.id]] !== null) {o[config.childrenList] = childrenListMap[o[config.id]];}if (o[config.childrenList]) {for (let c of o[config.childrenList]) {adaptToChildrenList(c);}}}return tree;
}

调用如下

      listDept().then(response => { //从后台获取到数据this.deptList = this.handleTree(response.data, "deptId");});

构建之后数据结构如下

[{"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:21", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 100, "parentId": 0, "ancestors": "0", "deptName": "中旭科技", "orderNum": "0", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [{"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:21", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 101, "parentId": 100, "ancestors": "0,100", "deptName": "深圳总公司", "orderNum": "1", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [{"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:21", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 103, "parentId": 101, "ancestors": "0,100,101", "deptName": "研发部门", "orderNum": "1", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:21", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 104, "parentId": 101, "ancestors": "0,100,101", "deptName": "市场部门", "orderNum": "2", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:22", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 105, "parentId": 101, "ancestors": "0,100,101", "deptName": "深圳部门", "orderNum": "3", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:22", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 106, "parentId": 101, "ancestors": "0,100,101", "deptName": "财务部门", "orderNum": "4", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:22", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 107, "parentId": 101, "ancestors": "0,100,101", "deptName": "运维部门", "orderNum": "5", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null}]}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:21", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 102, "parentId": 100, "ancestors": "0,100", "deptName": "长沙分公司", "orderNum": "2", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null, "children": [{"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:22", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 108, "parentId": 102, "ancestors": "0,100,102", "deptName": "市场部门", "orderNum": "1", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null}, {"searchValue": null, "createBy": "admin", "createTime": "2021-05-27 14:08:22", "updateBy": null, "updateTime": null, "remark": null, "params": { }, "deptId": 109, "parentId": 102, "ancestors": "0,100,102", "deptName": "财务部门", "orderNum": "2", "leader": "中旭", "phone": "15888888888", "email": "ry@qq.com", "status": "0", "delFlag": "0", "parentName": null}]}]}
]

js递归生成树结构数据相关推荐

python 画树递归_数据结构 - python如何递归生成树？
问题 class Tree: def __init__(self, label): self.root = label self.child = {} def set_child(self, lab ...
js递归性能影响及解决方案
js递归性能影响及解决方案参考文章: (1)js递归性能影响及解决方案 (2)https://www.cnblogs.com/muzs/p/9843405.html (3)https://www.j ...
JS + 递归实现细胞分裂
JS + 递归实现细胞分裂题目要求: 1个细胞,一个小时分裂一次,生命周期是3小时,求n小时后容器内,有多少细胞. 解析:这是一个典型的递归问题,过程如下: 第一个小时,只有a态细胞:第二个小时,a ...
js 处理树形结构数据
js 处理树形结构数据数据 let data = [{ id: 1, address: '安徽', parent_id: 0 },{ id: 2, address: '江苏', parent_id: ...
JS 递归树结构数据查找所有叶子节点
JS 递归树结构数据查找所有叶子节点 export function getAllLeaf (data) {let result = []function getLeaf (data) {data.f ...
react和js递归遍历树形结构数据
tree数据结构 { "title":"我喜欢的明星", "children":[ { "title":"杨幂 ...
js递归循环数组(tree结构数据)
var tdata = [{ "bs": "no", "child": [], "deptCode": "48 ...
js过滤树形结构数据并获取新的树形结构
工作中不时会遇见对树形结构数据的处理,有时候只需要遍历并获取其中一个属性值就行了(这部分内容请参考笔者的另一篇博客JS遍历树形结构方法),有时候我们则需要根据某些条件去过滤并得到新的树形结构数据. l ...
python深拷贝实现原理,js递归实现深拷贝
经过小编之前关于JavaScript深拷贝实现方式的介绍,大家已经知道深拷贝能够实现真正意义上的数组和对象的拷贝.其实使用内置对象JSON虽然简答,但不能将对对象的方法深拷贝,因此使用递归的方式就是最 ...

js递归生成树结构数据

js递归生成树结构数据相关推荐

最新文章

热门文章