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

[

{ 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
}

使用js将后台返回的数据转换成树形结构的更多相关文章

  1. SpringMVC系列(十一)把后台返回的数据转换成json、文件下载、文件上传

    一.后台返回的数据转换成json 1.引入转换json需要的3个依赖 <!--json转换需要的依赖 begin --> <dependency> <groupId> ...

  2. javascript将平行的拥有上下级关系的数据转换成树形结构

    转换函数 var Littlehow = {}; /** * littlehow 2019-05-15 * 平行数据树形转换器 * @type {{format: tree.format, sort: ...

  3. c# List列表数据转换成树形结构

    把List列表结构 转换成树形结构 /// <summary> /// 构造树形Json /// </summary> public static class TreeJson ...

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

    js将有父子关系的数据转换成树形结构数据 比如如下基本数据: let allDatas = [ { id: 3, name: 'bbbb', parendId: 1 }, { id: 2, name: ...

  5. JS将扁平化的数据处理成Tree结构

    let jsonData= [ { id:1,  parentId:0, name:"一级菜单A" }, { id:2, parentId:0, name:"一级菜单B& ...

  6. 记一则 Lambda内递归调用方法将集合对象转换成树形结构

    public dynamic GetDepartments(string labID) { List<int> usedIDs = new List<int>(); //缓存已 ...

  7. 使用js处理后台返回的Date类型的数据

    从后台返回的日期类型的数据,如果直接在前端进行显示的话,显示的就是一个从 1970-01-01 00:00:00到现在所经过的毫秒数,而在大多数业务中都不可能显示这个毫秒数,大多数都是显示一个正常的日 ...

  8. JS获取后台返回的JSON数据

    问题:通过$.get从后台获取了一段json串{"id":"1","name":"ww"},然后要拿到这里面的id和na ...

  9. js下载后台返回的docx(返回格式:文档流)文件

    原文地址: https://www.jianshu.com/p/a81c68c15fbd PS需要指定responseType类型,不然文件内容会乱码哦 咦?文件名乱码?需要手动设置文件名哦↓ 呀,文 ...

随机推荐

  1. HDU - 6016 Count the Sheep 二分图+思维

    Count the Sheep 题意: 问题描述 开学翘课固然快乐,然而也有让呃喵抓狂的事,那当然就是考试了!这可急坏了既要翘课又想要打BC还要准备考试的呃喵. 呃喵为了准备考试没有时间刷题,想打BC ...

  2. .NET Core 3.0之深入源码理解Configuration(三)

      写在前面 上一篇文章讨论了文件型配置的基本内容,本篇内容讨论JSON型配置的实现方式,理解了这一种配置类型的实现方式,那么其他类型的配置实现方式基本可以触类旁通.看过了上一篇文章的朋友,应该看得出 ...

  3. opensns入门

    1.公共控制器 AdminController.class.php 2.控制器中 使用 $list = $this->lists();  可以获取数据表中的数据,相当于基本的查询 3.将数据查询 ...

  4. 算法学习--Day7

    今天多做一些杂题练习一下. 第一题: 题目描述 在情报传递过程中,为了防止情报被截获,往往需要对情报用一定的方式加密,简单的加密算法虽然不足以完全避免情报被破译,但仍然能防止情报被轻易的识别.我们给出 ...

  5. C#基础知识回顾

    值类型和引用类型 值类型存在栈上,结构,枚举,数值类型 引用类型存在堆上,数组,类,接口,委托 把值类型存到引用类型中就是封箱,耗时 引用类型中的值类型是存在堆上,不是栈上,但是作为参数传递时,还是会 ...

  6. Unity 2D骨骼动画2:创建真实动画

    http://bbs.9ria.com/thread-401781-1-1.html 在这个系列,我们将关注Unity引擎提供的基于骨骼动画工具.它的主要思想是为了把它应用到你自己的游戏来介绍和教基本 ...

  7. PAT甲级——1131 Subway Map (30 分)

    可以转到我的CSDN查看同样的文章https://blog.csdn.net/weixin_44385565/article/details/89003683 1131 Subway Map (30  ...

  8. Codeforces Round #532(Div. 2) C.NN and the Optical IIIusion

    链接:https://codeforces.com/contest/1100/problem/C 题意: 一个圆球外面由其他圆球包裹,两两相连. 给出n,r. n为外面圆球数量,r为内部圆球半径. 求 ...

  9. c/c++学习系列之putchar、getchar、puts、gets的运用

    如果您只想取得使用者输入的字元,則可以使用getchar(),它直接取得使用者輸入的字元并传回,如果只想要输出一個字元,則也可以直接使用putchar(),以下是个简单的例子: #include &l ...

  10. 110 Balanced Binary Tree 平衡二叉树

    给定一个二叉树,确定它是高度平衡的.对于这个问题,一棵高度平衡二叉树的定义是:一棵二叉树中每个节点的两个子树的深度相差不会超过 1.案例 1:给出二叉树 [3,9,20,null,null,15,7] ...