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) ...
随机推荐
- Linux权限相关
权限分组 用户:文件所有者 用户组:多个用户的集合 其他:除了用户和用户组之外的任何用户 权限类别 r:表示读的权限 w:表示写的权限 x:表示执行的权限 s:表示setuid权限,允许用户以其拥有者 ...
- shell 截取字符串（转）
linux中对字符串的处理: 1.字符串分割例如 AAAAA-BBBBBB 按-分割去前后两部分 cut : [rich@localhost ~]$ str=AAAAA-BBBBBB[rich@l ...
- SecureCRT 退格键等不好用
1.MongoDB Shell中退格键使用的问题. 利用SecureCRT工具访问linux的时候,在使用MongoDB的交互式shell的时候,退格键(Backspace)无法使用,导致无法修改输入 ...
- 搭建hustoj现场环境
所需:就用了台普通电脑作为web以及数据库端,两台数据库实验室提供的服务器拿来做评测机. 根据提示将三台都装上hustoj 当然我是用之前比赛遗留下来的judge { 可以用以下来代替 wget ht ...
- php7+新特性
php7已经发布有段时间了,查了下正式版本的发布时间是2015年底,至于具体的新特性,在这里总结一下. 标量类型声明 php7新增了4种类型, 字符串(string), 整数 (int), 浮点数 ( ...
- DP Training（Updating）♪(^∇^*)
DP Training DP Training 01 https://vjudge.net/contest/220286 密码 nfls A 数塔(Easy) \(f[i][j]\) 表示当前选第 \ ...
- MySql下载地址
因为下载mysql需要注册,很麻烦,记录下下载地址: My sql 5.1.71 http://cdn.mysql.com/Downloads/MySQL-5.1/mysql-5.1.71-win32 ...
- Unity Shader入门精要学习笔记 - 第4章 学习 Shader 所需的数学基础
摘录自 冯乐乐的<Unity Shader入门精要> 笛卡尔坐标系 1)二维笛卡尔坐标系 在游戏制作中,我们使用的数学绝大部分都是计算位置.距离.角度等变量.而这些计算大部分都是在笛卡尔坐 ...
- Docker容器与容器数据
Docker容器与容器数据 image 与container 镜像(Image)和容器(Container)的关系,就像是面向对象程序设计中的 类 和 实例 一样,镜像是静态的定义,容器是镜像运行时的 ...
- MvcPager无刷新分页，包含搜索和跳转功能
1.MVC无刷新分页和搜索(第一版) http://pan.baidu.com/s/1eRQ7Ml8 密码:uqf7 出现的问题: 1)程序不走判断条件一直为false, 错误原因:1)可能没有引 ...