将数组数据转化成树形结构 tranListToTreeData
export function tranListToTreeData(list, rootValue) {
// list是最完整的数组
let arr = []; // 记录儿子
list.forEach((item) => {
// 记录是否有儿子
if (item.parentId === rootValue) {
// 继续找自己儿子
const child = tranListToTreeData(list, item.id);
if (child.length) {
item.child = child;
}
// 没有孩子的 直接 push 有孩子的给child 树型
arr.push(item); // 收集儿子
}
});
return arr;
}
定义方法的位置 utlis/index.js 工具层 ;
调用 rootValue 根据 parentID 的最上层父级 确定
tranListToTreeData(list, null)
ps: 使用递归的时候,就是自身调用自身 ,但是条件一定不能相同 ,否则造成死循环 ;
ps:数据类型:
[
{
"id": "1eae3bd8-6425-42c8-90f5-4b73c14fbb73",
"name": "y1",
"sort": 0,
"parentID": "fd215de1-3174-4bff-824a-b496eca31fb4",
"remarks": null,
"createdAt": "2024-05-28T17:01:24.573",
"updatedAt": "2024-05-29T08:57:06.339",
"deletedAt": null
},
{
"id": "251dfdbd-1e48-419f-9be1-a90e3aba6a57",
"name": "y2",
"sort": 1,
"parentID": "fd215de1-3174-4bff-824a-b496eca31fb4",
"remarks": null,
"createdAt": "2024-05-28T17:01:28.234",
"updatedAt": "2024-05-29T08:57:06.644",
"deletedAt": null
},
{
"id": "4e8a3572-18e1-4f00-98c7-cc306195a0b9",
"name": "y4",
"sort": 3,
"parentID": "fd215de1-3174-4bff-824a-b496eca31fb4",
"remarks": null,
"createdAt": "2024-05-28T17:01:35.356",
"updatedAt": "2024-05-29T08:57:06.647",
"deletedAt": null
},
{
"id": "885d0bdc-d03d-4b23-b02b-f3020c7e622f",
"name": "y3",
"sort": 2,
"parentID": "fd215de1-3174-4bff-824a-b496eca31fb4",
"remarks": null,
"createdAt": "2024-05-28T17:01:31.58",
"updatedAt": "2024-05-29T08:57:06.645",
"deletedAt": null
},
{
"id": "fd215de1-3174-4bff-824a-b496eca31fb4",
"name": "yy",
"sort": 1,
"parentID": null,
"remarks": null,
"createdAt": "2024-05-28T16:30:11.244",
"updatedAt": "2024-05-28T16:30:11.244",
"deletedAt": null,
"children": [
{
"id": "1eae3bd8-6425-42c8-90f5-4b73c14fbb73",
"name": "y1",
"sort": 0,
"parentID": "fd215de1-3174-4bff-824a-b496eca31fb4",
"remarks": null,
"createdAt": "2024-05-28T17:01:24.573",
"updatedAt": "2024-05-29T08:57:06.339",
"deletedAt": null
},
{
"id": "251dfdbd-1e48-419f-9be1-a90e3aba6a57",
"name": "y2",
"sort": 1,
"parentID": "fd215de1-3174-4bff-824a-b496eca31fb4",
"remarks": null,
"createdAt": "2024-05-28T17:01:28.234",
"updatedAt": "2024-05-29T08:57:06.644",
"deletedAt": null
},
{
"id": "885d0bdc-d03d-4b23-b02b-f3020c7e622f",
"name": "y3",
"sort": 2,
"parentID": "fd215de1-3174-4bff-824a-b496eca31fb4",
"remarks": null,
"createdAt": "2024-05-28T17:01:31.58",
"updatedAt": "2024-05-29T08:57:06.645",
"deletedAt": null
},
{
"id": "4e8a3572-18e1-4f00-98c7-cc306195a0b9",
"name": "y4",
"sort": 3,
"parentID": "fd215de1-3174-4bff-824a-b496eca31fb4",
"remarks": null,
"createdAt": "2024-05-28T17:01:35.356",
"updatedAt": "2024-05-29T08:57:06.647",
"deletedAt": null
}
]
}
]
2. 使用递归算法将扁平数组转换为树形对象:
const flatData = [
{ id: 1, name: 'Node 1', parentId: null },
{ id: 2, name: 'Node 2', parentId: 1 },
{ id: 3, name: 'Node 3', parentId: 2 },
{ id: 4, name: 'Node 4', parentId: 3 },
{ id: 5, name: 'Node 5', parentId: 3 }
]; function convertToTree(flatData, parentId = null) {
const children = flatData.filter(node => node.parentId === parentId);
if (!children.length) {
return null;
}
return children.map(node => ({
...node,
children: convertToTree(flatData, node.id)
}));
} const treeData = convertToTree(flatData);
console.log(treeData);
将数组数据转化成树形结构 tranListToTreeData的更多相关文章
- Vue组件模板形式实现对象数组数据循环为树形结构
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...
- C# 把带有父子关系的数据转化为------树形结构的数据 ,以及 找出父子级关系的数据中里面的根数据Id
紧接上一篇,将List<Menu>的扁平结构数据, 转换成树形结构的数据 返回给前端 , 废话不多说,开撸! --------------------- 步骤: 1. 建 Menu ...
- js把json数据转化成树形数据
/*转化函数*/ function(data, attributes) { let resData = data; let tree = []; for(let i = 0; i < resDa ...
- xml格式的数据转化成数组
将得到的xml格式的数据转化成数组 <?php //构造xml $url = "http://api.map.baidu.com/telematics/v3/weather?locat ...
- 使用js将后台返回的数据转换成树形结构
将类似如下数据转换成树形的数据: [ { id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1 ...
- javascript将平行的拥有上下级关系的数据转换成树形结构
转换函数 var Littlehow = {}; /** * littlehow 2019-05-15 * 平行数据树形转换器 * @type {{format: tree.format, sort: ...
- 记一则 Lambda内递归调用方法将集合对象转换成树形结构
public dynamic GetDepartments(string labID) { List<int> usedIDs = new List<int>(); //缓存已 ...
- 将数据转化成字符串时:用字符串的链接 还是 StringBuilder
/* 目的:将数据转化成字符串时:用字符串的链接 还是 StringBuilder呢? */ public class Test{ public static void main(String[] a ...
- c# List列表数据转换成树形结构
把List列表结构 转换成树形结构 /// <summary> /// 构造树形Json /// </summary> public static class TreeJson ...
- 关于mysql中数据存储复合树形结构,查询时结果按树形结构输出
1.主要思想:根据已有数据,规则性的造数据 select * FROM(select lId,strName,lId as lParentId,-1 as orderIdx from tbClassi ...
随机推荐
- 【Spring-Security】Re02 基础认证流程
一.权限认证模拟操作: 编写Security配置类: package cn.zeal4j.configuration; import org.springframework.context.annot ...
- 【SqlServer】Windows-2019 安装
安装教程参考: https://blog.csdn.net/weixin_43790591/article/details/104149800 数据库SQL Server 2019 + 管理工具SQL ...
- 树莓派3b+ ubuntu mate18.04系统下的kodi软件 实现airplay投屏
1. 更新资源 sudo apt-get update 2. 安装kodi sudo apt-get install kodi 安装成功后系统菜单中的音影一栏中有kodi 这一项,进入kod ...
- pycuda学习过程中的一些发现,cuda函数的初始化要在cuda内存空间初始化之后,否则会报错
参考: https://www.cnblogs.com/devilmaycry812839668/p/15348610.html 最近在看WarpDrive的代码,其中cuda上运行的代码是使用pyc ...
- mybatis-plus之逻辑删除&自动填充&乐观锁
1.背景 mybatis-plus除了常规的一些CRUD还有其他的的功能如下 2.逻辑删除 2.1.实现配置 步骤一.数据库准备一个逻辑删除字段,一般是deleted 步骤二.配置文件中添加入下配置 ...
- LVM逻辑卷创建
创建步骤 1.创建分区 2.创建PV 3.创建VG 4.创建LV 5.格式化及挂载 创建分区 使用分区工具(如fdisk等)创建LVM分区. 创建PV $ pvcreate /dev/sdb5 #将每 ...
- 图穷匕见-所有反DDD模式都是垃圾
本文书接上回<主观与客观,破除DDD凭经验魔咒>,关注公众号(老肖想当外语大佬)获取信息: 最新文章更新: DDD框架源码(.NET.Java双平台): 加群畅聊,建模分析.技术实现交流: ...
- Comfyui 基础教程(一) —— 本地安装部署
前言 前面一篇文章已经介绍过,ComfyUI 和 Stable Diffusion 的关系.不清楚的朋友,看传送门 Stable Diffusion 小白的入坑铺垫 . WebUI 以及 ComfyU ...
- ipv6 知识
ref: 网络编程懒人入门(十一):一文读懂什么是IPv6 https://cloud.tencent.com/developer/article/1551346 IT知识大全:IPv6详解
- 【漏洞分析】Penpie 攻击事件:重入攻击构造奖励金额
背景信息 2024 年 9月 3日,Penpie 合约遭受重入攻击,攻击者在重入阶段向合约添加流动性来冒充奖励金额,从而获取合约内原有的奖励代币.资产损失高达 2734 万美元. 2024 年 5月, ...