js将有父子关系的数据转换成树形结构数据
js将有父子关系的数据转换成树形结构数据
比如如下基本数据:
let allDatas = [
{
id: 3,
name: 'bbbb',
parendId: 1
},
{
id: 2,
name: 'aaaaa',
parendId: 2
},
{
id: 4,
name: 'ccccc',
parendId: 1
},
{
id: 5,
name: 'ddddd',
parendId: 4
},
{
id: 6,
name: 'eeeee',
parendId: 4
},
{
id: 7,
name: 'ffff',
parendId: 6
},
{
id: 8,
name: 'ggggg',
parendId: 3
},
{
id: 9,
name: 'hhhhh',
parendId: 5
},
{
id: 10,
name: 'jjjj',
parendId: 6
}
];
需要转换成如下数据格式,如下:
[
{
"id": 3,
"name": "bbbb",
"children": [
{
"id": 8,
"name": "ggggg",
"children": []
}
]
},
{
"id": 4,
"name": "ccccc",
"children": [
{
"id": 5,
"name": "ddddd",
"children": [
{
"id": 9,
"name": "hhhhh",
"children": []
}
]
},
{
"id": 6,
"name": "eeeee",
"children": [
{
"id": 7,
"name": "ffff",
"children": []
},
{
"id": 10,
"name": "jjjj",
"children": []
}
]
}
]
}
]
如上id为8的父节点就是id为3的,而id为3的父节点为1,但是父节点目前没有,所以id为3就是顶级节点了。同理其他的也是一样的道理;
JS代码如下:
// 属性配置设置
let attr = {
id: 'id',
parendId: 'parendId',
name: 'name',
rootId: 1
};
function toTreeData(data, attr) {
let tree = [];
let resData = data;
for (let i = 0; i < resData.length; i++) {
if (resData[i].parendId === attr.rootId) {
let obj = {
id: resData[i][attr.id],
name: resData[i][attr.name],
children: []
};
tree.push(obj);
resData.splice(i, 1);
i--;
}
}
var run = function(treeArrs) {
if (resData.length > 0) {
for (let i = 0; i < treeArrs.length; i++) {
for (let j = 0; j < resData.length; j++) {
if (treeArrs[i].id === resData[j][attr.parendId]) {
let obj = {
id: resData[j][attr.id],
name: resData[j][attr.name],
children: []
};
treeArrs[i].children.push(obj);
resData.splice(j, 1);
j--;
}
}
run(treeArrs[i].children);
}
}
};
run(tree);
return tree;
}
let arr = toTreeData(allDatas, attr);
console.log(arr);
js将有父子关系的数据转换成树形结构数据的更多相关文章
- javascript将平行的拥有上下级关系的数据转换成树形结构
转换函数 var Littlehow = {}; /** * littlehow 2019-05-15 * 平行数据树形转换器 * @type {{format: tree.format, sort: ...
- JS 将有父子关系的数组转换成树形结构数据
将类似如下数据转换成树形的数据 [{ id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1', ...
- 使用js将后台返回的数据转换成树形结构
将类似如下数据转换成树形的数据: [ { id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1 ...
- c# List列表数据转换成树形结构
把List列表结构 转换成树形结构 /// <summary> /// 构造树形Json /// </summary> public static class TreeJson ...
- Java编程:将具有父子关系的数据库表数据转换为树形结构,支持无限层级
在平时的开发工作中,经常遇到这样一个场景,在数据库中存储了具有父子关系的数据,需要将这些数据以树形结构的形式在界面上进行展示.本文的目的是提供了一个通用的编程模型,解决将具有父子关系的数据转换成树形结 ...
- 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据
第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- vue-自主研发非父子关系组件之间通信的问题
相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...
- Linux编程 9 (shell类型,shell父子关系,子shell用法)
一. shell类型 1.1 交互式 bin/ shell程序 当用户登录到某个虚拟控制台终端或是在GUI中启动终端仿真器时,默认的shell程序就会开始运行.系统启动什么样的shell程序取决于你 ...
随机推荐
- 【github&&git】4、git常用命令(持续更新中)
git常用命令(持续更新中) 本地仓库操作git int 初始化本地仓库git add . ...
- JavaScript的值传递和引用传递
译者按: 程序员应该知道递归,但是你真的知道是怎么回事么? 原文: All About Recursion, PTC, TCO and STC in JavaScript 译者: Fundebug 为 ...
- 【c++】计算句子中单词的平均长度
Description 编程输入一行文本,计算这行文本的单词平均长度.假设每个单词用至少一个空格或者标点(英文逗号.句号)隔开.使用C++ string类型. Input 输入一行文本,不包含数字 O ...
- JavaScript异步和单线程
一,同步和异步的区别: 同步会阻塞代码执行,而异步不会.(比如alert是同步,setTimeout是异步) 二,前端使用异步的场景: 1,定时任务:setTimeout,setInterval 2, ...
- Linux 学习笔记之超详细基础linux命令 Part 5
Linux学习笔记之超详细基础linux命令 by:授客 QQ:1033553122 ---------------------------------接Part 4----------------- ...
- loadrunner11中文版破解文档+录制脚本(图/文)
下面是整理后的loadrunner11破解版的所有文件及操作步骤. LoadRunner11安装 1.Loadrunner11下载链接:https://pan.baidu.com/s/15Svt3kt ...
- 小技巧-mac修改finder菜单栏
效果: 方法: 添加:打开finder后,长按command,可以将其他app拖到菜单栏. 删除:同理,长按command,将不需要的图标拖出菜单栏即可. PS:强烈推荐gotoshell这个小工具, ...
- Chrome_浏览器开发人员工具
Google Chrome 浏览器开发人员工具,让网页开发变得更轻松 无论是 IE 6/7 的 Internet Explorer Developer Toolbar 或者是 IE 8 自带的 Dev ...
- plsql备份表---只是表---不包含表数据
写这个的同时还在备份,表的数据进度很慢,数据太大了. 用的工具是plsql 导出表:点击 tool工具 ---> export user object 导出用户目标 ----> ...
- zTree 优秀的jquery树插件
zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...