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将有父子关系的数据转换成树形结构数据的更多相关文章

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

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

  2. JS 将有父子关系的数组转换成树形结构数据

    将类似如下数据转换成树形的数据 [{ id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1', ...

  3. 使用js将后台返回的数据转换成树形结构

    将类似如下数据转换成树形的数据: [ { id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1 ...

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

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

  5. Java编程:将具有父子关系的数据库表数据转换为树形结构,支持无限层级

    在平时的开发工作中,经常遇到这样一个场景,在数据库中存储了具有父子关系的数据,需要将这些数据以树形结构的形式在界面上进行展示.本文的目的是提供了一个通用的编程模型,解决将具有父子关系的数据转换成树形结 ...

  6. 第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据

    第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...

  7. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

  8. vue-自主研发非父子关系组件之间通信的问题

    相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...

  9. Linux编程 9 (shell类型,shell父子关系,子shell用法)

    一. shell类型 1.1  交互式 bin/ shell程序 当用户登录到某个虚拟控制台终端或是在GUI中启动终端仿真器时,默认的shell程序就会开始运行.系统启动什么样的shell程序取决于你 ...

随机推荐

  1. MyBatis学习笔记(一) 概述

    一.什么是MyBatis? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBat ...

  2. CTO 之“六脉神剑”

    他深谙电商之道,从零打造 1 号店网站及供应链系统,以技术引领业务发展.他是欧电云创始人韩军,下面将由他分享完美 CTO “六脉神剑”的经验之谈. 首先,从对 CTO 的一个认识误区讲起. 不写代码的 ...

  3. mysql 中表和数据库名称不要使用 '-' 命名

    mysql 中表和数据库名称不要使用 '-' 命名 若使用这个符号,比如 my-name 做为数据库表名称 那么在 sql 中必须如下: select * from `my-name`

  4. JS性能优化 之 文档片段 createDocumentFragment

    我们用原生JS进行开发时,经常会用到两种更新DOM节点的方法:innerHTML 和 appendChild() .其中 innerHTML 会完全替换掉原先的节点内容,如果我们是想向元素追加子节点的 ...

  5. 浅谈Arrays.asList()方法的使用

    首先,该方法是将数组转化为list.有以下几点需要注意: (1)该方法不适用于基本数据类型(byte,short,int,long,float,double,boolean) (2)该方法将数组与列表 ...

  6. 【Java入门提高篇】Day22 Java容器类详解(五)HashMap源码分析(上)

    准备了很长时间,终于理清了思路,鼓起勇气,开始介绍本篇的主角——HashMap.说实话,这家伙能说的内容太多了,要是像前面ArrayList那样翻译一下源码,稍微说说重点,肯定会让很多人摸不着头脑,不 ...

  7. html5手机移动端三级联动城市选择器

    //我的地址 var area1 = new LArea(); area1.init({ 'trigger': '#demo1', //触发选择控件的文本框,同时选择完毕后name属性输出到该位置 ' ...

  8. 消除TortoiseSVN 检出到(checkout)桌面上显示一堆问号

    之前不小心直接将版本库的内容检出到桌面,后才发现桌面上的文件图标都变成了问号,新建文件夹也同样如此. 为了解决这个问题,采用如下方法(任何一个检出文件夹均可这样操作): 1.删除桌面隐藏的.SVN文件 ...

  9. Websocket通信过程

    1. 客户端与服务器建立连接 2. 客户端通过session向服务器发送消息 3. 服务器接收客户端的消息,调用服务器端的onMessage()方法包装.生成消息内容(新的消息包括客户端ID) 4. ...

  10. 【redis专题(1)】安装与启动

    简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo(redis之父)写的key-value存储系统. Redis提供了一些丰富的数据 ...