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

将类似如下数据转换成树形的数据：

[{ 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将后台返回的数据转换成树形结构相关推荐

javascript将平行的拥有上下级关系的数据转换成树形结构
下载地址 csdn下载地址服务端数据存储当有多级菜单或者多级部门这样的场景的时候,传统的结构化数据设计都会用类似parentId来标识其父级,以达到多级树形结构存储于数据库中服务端提供接口服务 ...
js 把线性的数据结构改成树形结构
把数组的数据结构改成树形结构. var aaa = [{name:"111", id: 1, pId: 0, children: []},{name:"222" ...
java 通用扁平数据转换成树形结构
大家好,我是入错行的bug猫.(http://blog.csdn.net/qq_41399429,谢绝转载) 所谓树形结构,就是上级节点中,包含若干子节点,然后子节点中又包含其子节点,一般是没有层级次 ...
将数据库查询出来的数据转化成树形结构
从数据库查询的每一条数据都包含id和fid字段,将获得的数据转换成树形结构假设从数据库查询出来的数据对应的实体类: public class department {private int id;p ...
如何将数据库中text字段中返回的数据转换成数组的形式，并且将字符串的数字转换成数字的形式显示
如何将数据库中text字段中返回的数据转换成数组的形式,并且将字符串的数字转换成数字的形式显示数据库text字段数据库中的text字段在前端界面返回的时候是成字符串的形式的,类似于下图那么,在 ...
JS 如何快速高效的将数组转换成树形结构
JS 如何快速高效的将数组转换成树形结构 const data = [{id: 1,pid: 0,name: 'body'}, {id: 2,pid: 1,name: 'title'}, {id: 3 ...
python画父子关系图_将有父子关系的一维数组转换成树形结构(多维)数据
先来个函数注释 : /** * 将有父子关系的一维数组转换成树形结构(多维)数据 * console.log(JSON.stringify(setTreeData(data), null, 2)); ...
mysql 父子维,将有父子关系的一维数组转换成树形结构(多维)数据
拉莫斯之舞先来个函数注释 :/** * 将有父子关系的一维数组转换成树形结构(多维)数据 * console.log(JSON.stringify(setTreeData(data), null, ...
【每日积累】JS将后台返回的Unix时间戳转换成YYYY-MM-DD
1.问题重现后台返回的时间格式 2.解决方案: function getYMDHMS(obj) {let unixtime = obj;let ...

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

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

最新文章

热门文章