将有父子关系的数组对象转换成树形结构数据
程序员文章站
2022-05-27 22:30:37
原数据: 转换方法: ......
原数据:
1 data: [{ 2 id: 1, 3 name: '1', 4 }, 5 { 6 id: 2, 7 name: '1-1', 8 parentid: 1 9 }, 10 { 11 id: 3, 12 name: '1-1-1', 13 parentid: 2 14 }, 15 { 16 id: 4, 17 name: '1-2', 18 parentid: 1 19 }, 20 { 21 id: 5, 22 name: '1-2-2', 23 parentid: 4 24 }, 25 { 26 id: 6, 27 name: '1-1-1-1', 28 parentid: 3 29 }, 30 { 31 id: 7, 32 name: '2', 33 parentid: '' 34 }, 35 { 36 id: 8, 37 name: '3' 38 }, 39 { 40 id: 9, 41 name: '3-1', 42 parentid: 7 43 } 44 ]
转换方法:
1 /** 2 * 该方法用于将有父子关系的数组转换成树形结构的数组 3 * 接收一个具有父子关系的数组作为参数 4 * 返回一个树形结构的数组 5 */ 6 translatedatatotree(data) { 7 // 没有父节点的数据 8 let parents = data.filter(value => value.parentid == 'undefined' || value.parentid == null || 9 value.parentid == 10 '') 11 // 有父节点的数据 12 let children = data.filter(value => value.parentid !== 'undefined' && value.parentid != 13 null || value.parentid != 14 '') 15 // 定义转换方法的具体实现 16 let translator = (parents, children) => { 17 // 遍历父节点数据 18 parents.foreach((parent) => { 19 // 遍历子节点数据 20 children.foreach((current, index) => { 21 // 此时找到父节点对应的一个子节点 22 if (current.parentid === parent.id) { 23 // 对子节点数据进行深复制,这里只支持部分类型的数据深复制,对深复制不了解的童靴可以先去了解下深复制 24 let temp = json.parse(json.stringify(children)) 25 // 让当前子节点从temp中移除,temp作为新的子节点数据,这里是为了让递归时,子节点的遍历次数更少,如果父子关系的层级越多,越有利 26 temp.splice(index, 1) 27 // 让当前子节点作为唯一的父节点,去递归查找其对应的子节点 28 translator([current], temp) 29 // 把找到子节点放入父节点的children属性中 30 typeof parent.children !== 'undefined' ? parent.children 31 .push( 32 current) : 33 parent.children = [current] 34 } 35 }) 36 }) 37 } 38 // 调用转换方法 39 translator(parents, children) 40 // 返回最终的结果 41 return parents; 42 }
推荐阅读
-
php实现数组中索引关联数据转换成json对象的方法
-
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
-
搜索功能(五)03-搜索关键字历史重复记录-数组去重操作——es6 set类数组-数据结构-数组去重 & 三个点(...)方法-对象的延展操作-拆解数组
-
根据条件找到树形结构数组中符合要求的一个或者多个对象
-
php实现数组中索引关联数据转换成json对象的方法
-
JSON复杂数据处理之Json树形结构数据转Java对象并存储到数据库的实现
-
php实现数组中索引关联数据转换成json对象的方法,数据转换json
-
php实现数组中索引关联数据转换成json对象的方法_PHP
-
nodejs将有父子关系的数据转换成树形数据结构
-
php实现数组中索引关联数据转换成json对象的方法_PHP