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) ...
随机推荐
- 洛谷P2485 [SDOI2011]计算器（exgcd+BSGS）
传送门 一题更比三题强 1操作直接裸的快速幂 2操作用exgcd求出最小正整数解 3操作用BSGS硬上 然后没有然后了 //minamoto #include<cstdio> #inclu ...
- 区间质数查询 luoguP1865
原题 https://www.luogu.org/problemnew/show/P1865 本来get到了一个很好的判断素数的方法 O(玄学常数)https://www.luogu.org/blog ...
- （转）cookie和session的区别
转自 http://www.cnblogs.com/shiyangxt/archive/2008/10/07/1305506.html http://justsee.iteye.com/blog/15 ...
- Hexo搭建博客教程(2) - 博客的简单个性化配置
本章主要讲博客的个性化,譬如站点的基本配置(语言.头像.站点图标等).安装新的Hexo主题(NexT主题)以及主题的配置. 1. 修改站点配置 打开站点配置文件 ,找到: # Site title: ...
- JS面向对象方法（一）： 使用原生JS 实现导航栏下多级分类弹出效果
利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...
- POJ3744（概率dp）
思路:一长段概率乘过去最后会趋于平稳,所以因为地雷只有10个,可以疯狂压缩其位置,这样就不需要矩阵乘优化了.另外初始化f[0] = 0, f[1] = 1,相当于从1开始走吧.双倍经验:洛谷1052. ...
- Hadoop启动datanode失败，clusterId有问题
问题: 搭建伪Hadoop集群的时候,运行命令: hdfs namenode -format 格式化或者说初始化namenode. 然后用命令: start-dfs.sh 来启动hdfs时,jps发现 ...
- 牛客网Java刷题知识点之Java为什么不能支持多继承，但可以用接口来间接实现多继承
不多说,直接上干货! java只支持单继承,这是由于安全性的考虑,如果子类继承的多个父类里面有相同的方法或者属性,子类将不知道具体要继承哪个,而接口可以多实现,是因为接口只定义方法,而没有具体的逻辑实 ...
- 【C#】.net 导出Excel功能
将DataSet对象导出成Excel文档 一.不带格式控制 void btnExport_Click(object sender, EventArgs e) { IList<string> ...
- 《高性能MySQL》读书笔记之 MySQL锁、事务、多版本并发控制的基础知识
1.2 并发控制 1.2.1 读写锁 在处理并发读或写时,通过实现一个由两种类型的锁组成的锁系统来解决问题.这两种类型的锁通常被称为 共享锁(shared lock) 和 排它锁(exclusive ...