js 一维数组转成tree 对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript"> 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
}
/**
* 该方法用于将有父子关系的数组转换成树形结构的数组
* 接收一个具有父子关系的数组作为参数
* 返回一个树形结构的数组
*/
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
}
</script>
</body>
</html> ---------------------------------------------------------------
/*转化函数*/
function(data, attributes) {
let resData = data;
let tree = [];
for(let i = 0; i < resData.length; i++) {
if(resData[i][attributes.parentId] === attributes.rootId) {
let obj = {
id: resData[i][attributes.id],
title: resData[i][attributes.name],
children: []
};
tree.push(obj);
resData.splice(i, 1);
i--;
}
}
run(tree); function run(chiArr) {
if(resData.length !== 0) {
for(let i = 0; i < chiArr.length; i++) {
for(let j = 0; j < resData.length; j++) {
if(chiArr[i].id == resData[j][attributes.parentId]) {
let obj = {
id: resData[j][attributes.id],
title: resData[j][attributes.name],
children: []
};
chiArr[i].children.push(obj);
resData.splice(j, 1);
j--;
}
}
run(chiArr[i].children);
}
}
} return tree; }
1
var data=[{id:1,parentId:0,name:"测试1"},
1
{id:2,parentId:1,name:"测试2"}]
1
2
3
4
5
<em id="__mceDel"><br>let attributes = { //定义数据属性名称
id: 'id',
parentId: 'parentId',
name: 'groupName',<br>rootId: 0
}<br>/*调用*/<br>formatTreeData(data,attributes);<br></em>
js 一维数组转成tree 对象的更多相关文章
- 基于List数组转换成tree对象
package com.shjysoft.yunxi.sync.webservice; import java.util.ArrayList;import java.util.Date;import ...
- js将一个具有相同键值对的一维数组转换成二维数组
这两天,一个前端朋友在面试的笔试过程中遇到了一道类似于"用js实现将一个具有相同code值的一维数组转换成相同code值在一起的二维数组"的题目.他面试过后,把这个问题抛给了我,问 ...
- JS一维数组、多维数组和对象的混合使用
转载地址:http://blog.csdn.net/wangyuchun_799/article/details/38460515 引言 这篇文章的主要目的是讲解JavaScript数组和对象的混合使 ...
- Java第十二次作业：什么是一维数组？什么是对象数组？吃金币游戏2.0版 新增炸弹功能 新增游戏倒计时功能 新增胜利失败检测功能 使用如鹏游戏引擎制作窗体 一维数组设置金币
什么是数组? 数组的定义:是用统一的名字代表这批数据,用序号来区分各个数据.数组是无序的数据元素按有序的下标组成的集合,分配固定空间大小的一种容器. 如何理解:其实就是一个同时放很多数据的变量. a= ...
- 【php】实现多个一维数组转换成二维循环数组
1.目的:将下面类型数组转换成模板循环打印二维数组 数组库一维数组: 模板要求循环二维数组: 2.代码: header("Content-type: text/html; charset=u ...
- C# byte数组转成Bitmap对象
方法一: /// <summary> /// 将数组转换成彩色图片 /// </summary> /// <param name="rawValues" ...
- html标签内部简单加js 一维数组求最大值 最小值两个值位置和数字金字塔图形
html标签内部,简单加js <a href=""></a><!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- PHP多个一维数组合并成二维数组的简易方法
当我们需要进行数组遍历数据的时候,需要将多个一维数组进行二维的转换,方法很简单.如下: <?php $a= array('张三','李四','王五'); $b= array ('23','24' ...
- js一维数组转换为二维数组
function arrTrans(num, arr) { // 一维数组转换为二维数组 const iconsArr = []; // 声明数组 arr.forEach((item, index) ...
随机推荐
- perl C/C++ 扩展（五）
perl 的C++扩展,返回值为自定义类型. 在 perl C/C++扩展(三) 中,我已经介绍了,如何让perl 认识 c++的类,但是前面的介绍中,包括我参考的博客http://chunyemen ...
- MySQL--表操作1
这是对自己学习燕十八老师mysql教程的总结,非常感谢燕十八老师. 依赖软件:mysql 系统环境:win 注:本次所有命令都是在命令行上执行 数据库的四大天王操作:增删改查 增删改查都是在对表进行操 ...
- 在指定的ChartArea中显示Series
WinForm的Chart有Series, ChartArea,输出图表就往Serie里扔数据就可以了,很方便是吧.我原想Area和serie有上下级关系,可是我错了,Area和Serie并没有上下级 ...
- 2018ccpc_hn
A. Easy h-index #include <iostream> #include <algorithm> #include <cstring> #inclu ...
- django_view操作数据库
1 create def add_area(request): area = Area.objects.create(name='commom',description='a commom area' ...
- eclipse导入mavn工程报Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 的解决办法
详细报错: Failure to transfer org.apache.maven.plugins:maven-resources-plugin:pom:2.6 from http://10.74. ...
- code与const void*指针
关于指针: 当定义int *p时,它也会在内存中给指针变量p分配一个内存单元,假设这个单元在内存的编址为0x1003:此时,0x1003中的值是不确定的,(因为我们没有给指针赋值),当编译器遇到了p= ...
- Yii2 之 UrlManager 实践 (一)
1. enablePrettyUrl yii2默认不支持类似 http://<domain>/site/error 的url格式,需要在config.php中启用 enablePrett ...
- html 手机端click 事件延迟问题(fastclick.js使用方法)
下载地址: fastclick.js 为什么存在延迟? 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击 ...
- dos命令-环境变量-数据类型-命名规范
JAVA第一天笔记--dos命令-环境变量-数据类型-命名规范 1.能够阐述JDK和JRE之间区别 JDK(Java Development Kit)是提供给开发人员使用的JAVA开发工具包(java ...