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的更多相关文章

  1. Vue组件模板形式实现对象数组数据循环为树形结构

    数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout ...

  2. C# 把带有父子关系的数据转化为------树形结构的数据 ,以及 找出父子级关系的数据中里面的根数据Id

    紧接上一篇,将List<Menu>的扁平结构数据, 转换成树形结构的数据 返回给前端   ,   废话不多说,开撸! --------------------- 步骤: 1. 建 Menu ...

  3. js把json数据转化成树形数据

    /*转化函数*/ function(data, attributes) { let resData = data; let tree = []; for(let i = 0; i < resDa ...

  4. xml格式的数据转化成数组

    将得到的xml格式的数据转化成数组 <?php //构造xml $url = "http://api.map.baidu.com/telematics/v3/weather?locat ...

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

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

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

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

  7. 记一则 Lambda内递归调用方法将集合对象转换成树形结构

    public dynamic GetDepartments(string labID) { List<int> usedIDs = new List<int>(); //缓存已 ...

  8. 将数据转化成字符串时:用字符串的链接 还是 StringBuilder

    /* 目的:将数据转化成字符串时:用字符串的链接 还是 StringBuilder呢? */ public class Test{ public static void main(String[] a ...

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

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

  10. 关于mysql中数据存储复合树形结构,查询时结果按树形结构输出

    1.主要思想:根据已有数据,规则性的造数据 select * FROM(select lId,strName,lId as lParentId,-1 as orderIdx from tbClassi ...

随机推荐

  1. 对比python学julia(第四章:人工智能)--(第四节)绘画大师

    1.1.  项目简介 所谓图像风格迁移,是利用深度学习技术,将一幅风格图像输人卷积神经网络提取风格特征,再将其应用到另一幅内容图像上,从而生成一幅与风格囝像相仿的新图像.如果选取绘画大师的作品作为风格 ...

  2. 家务机器人(人形机器人)—— Mobile ALOHA: Your Housekeeping Robot

    项目地址: https://mobile-aloha.github.io/ 演示视频地址: https://www.youtube.com/watch?v=HaaZ8ss-HP4 论文地址: http ...

  3. IEEE TCDS 专刊"Embodied AI in Indoor Robotics"征稿通知

    原文地址: https://mp.weixin.qq.com/s/Z-U4EO6FCF703yMwHXAq5A 随着深度学习和强化学习在机器人学领域的迅猛发展,尤其是大型语言模型的创新进步,具身人工智 ...

  4. 智能机器人(双足机器人、四足机器人、人形机器人humanoid)与自动驾驶技术/FSD(Full Self-Drive)“完全自动驾驶”在技术领域的相关性?

    前文: https://www.cnblogs.com/devilmaycry812839668/p/18079439 前文中已经说了,对于能力强大的机器人公司来说,软件和AI技术并不是难点,真正的难 ...

  5. windows10操作系统QQ音乐开全局音效后频繁出现报错,鼠标卡顿,系统死机等问题——解决方法

    如题: windows10操作系统QQ音乐开全局音效后频繁出现报错,鼠标卡顿,系统死机等问题. QQ音乐,开启全局音效,提示需要重启: 重启电脑后发现出现频繁卡机,鼠标卡顿,甚至短暂的死机现象,查看控 ...

  6. DIjkstra进阶模板 路径记录 按权重(结点数最小等)记录

    struct DIJ { using i64 = long long; using PII = pair<i64, i64>; vector<i64> dis, path, n ...

  7. quartz集成spring集群部署

    由于quartz单节点无法满足业务的需求,后面我们在单节点的基础上进行了集群部署. 由以前的定时任务信息放在jobs.xml配置文件中,转而放到数据库中. 1.新建数据库表 CREATE TABLE ...

  8. md2pdf

    https://www.pandoc.org/installing.html https://github.com/jgm/pandoc/releases/tag/2.18 https://blog. ...

  9. 【粉丝问答19】Linux内核中为啥变量没初始化就用了?你确定了解宏定义?

    @ 目录 一.问题 二.分析 三.宏定义的注意点 1. 只占用编译时间 2. 宏替换发生时机 3. 预处理包括哪些工作 四.如何快速展开复杂的宏定义? 第一步 第二步 五.练习 六.15个经典宏定义小 ...

  10. kali常用配置

    用户须知 1.免责声明:本教程作者及相关参与人员对于任何直接或间接使用本教程内容而导致的任何形式的损失或损害,包括但不限于数据丢失.系统损坏.个人隐私泄露或经济损失等,不承担任何责任.所有使用本教程内 ...