前端JS一维数组转树状数组并获取当前节点的所有父级名称或id

news2024/10/4 10:27:30

 注意一维数组里面必须要有属性跟父级关联

	test(){
				const list2 = [
					{id: 1,pid: 0,name: '湖南'},
					{id: 2,pid: 1,name: '长沙'},
					{id: 3,pid: 2,name: '雨花区'},
				];
				// 参数一:需要转树状数组的数组
				// 参数二:父id
				// 参数三:当前递归的父级节点name
				// 参数三:当前递归的父级节点id
				const arrayToTree = (arr, pid, name,idChian) => {
				  return arr.reduce((res, item) => {
						console.log(res, 'res, item',item,'``````',pid)
				    if (item['pid'] === pid) {
							item.text = `${name}${name==''?'':'>'}${item.name}`//当前节点的所有父级节点名称
							item.idChian = `${idChian}${idChian ==''?'':','}${item.id}`//当前节点的所有父级节点id
				      item.children = arrayToTree(arr, item['id'],item.text,item.idChian);//递归调用
				      return res.concat(item);
				    }
				    return res;
				  }, []);
				};
				console.log(arrayToTree(list2, 0,'',''))
                return arrayToTree ;
			},

调用函数获取结果:

 可以看出每个节点的属性都多了一个text属性即为当前节点的所有父级节点链,

而idChian则为当前节点的所有父级节点id,如需当前节点顶级节点则直接取idChian的第一个字符即可

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/699652.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

移远通信再推模组新品,全新5G智能模组SG530C-CN智创全景智慧生活

6月28日,在2023 MWC上海展会首日,移远通信再次宣布推出模组新品。 此次推出的全新5G智能模组SG530C-CN在连接能力、算力、多媒体性能与成本效益等层面都呈现较高水平。该模组将在智慧零售、车载后装、娱乐/直播、手持终端、工业AI等行业与应用场景上大有…

大数据需要一场硬件革命

光子盒研究院 计算领域的进步往往集中在软件上:华丽的应用程序和软件可以跟踪人和生态系统的健康状况、分析大数据,并在智力竞赛中击败人类冠军。与此同时,对支撑所有这些创新的硬件进行全面改革的努力相对来说,略显小众。 自2020…

如何实现MySQL的读写分离?

其实很简单,就是基于主从复制架构,简单来说,就搞一个主库,挂多个从库,然后我们就单 单只是写主库,然后主库会自动把数据给同步到从库上去。 MySQL主从复制原理的是啥? 主库将变更写入 binlog …

架构图的实现过程

项目需求架构图 实现代码 index.vue <template><!-- 外层div --><div class"topu-container" :style"{ minWidth: ${functionDomainList.length * 330}px }"><!-- 头部显示 --><div class"topu-heard"><!-- …

vue3高德地图点击标点

1.首先如果没有key的话需要在高德开发平台申请key。 2.安装 npm i amap/amap-jsapi-loader --save cnpm i amap/amap-jsapi-loader --save3.容器&#xff1a; <template><div><div class"info"><h4>获取地图级别与中心点坐标</h4>&l…

git常用命令之Cherry-pick

8. Cherry-pick 8.1 基本用法 命令作用延展阅读git cherry-pick 125a1d将提交125a1d应用于当前分支. 在当前分支会产生一个新的提交.链接git cherry-pick bugfix将分支bugfix应用于当前分支. 在当前分支会产生一个新的提交. 场景1&#xff1a;提交125a1d应用到master分支 命…

玖章算术与百度智能云达成合作,「NineData SQL 开发」成为百度智能云主推的数据库工具

2023 年 6 月 19 日&#xff0c;玖章算术&#xff08;浙江&#xff09;科技有限公司旗下的多云数据管理平台 NineData 正式入驻百度智能云市场&#xff0c;双方的深度技术融合将为客户提供智能高效、安全可靠的数据库开发服务。通过适配百度智能云数据库&#xff0c;NineData 为…

计算机网络中的安全

计算机网络中的安全 1 什么是网络安全2 加密的方式——机密性2.1 对称密钥加密2.2 公开密钥加密 3 报文鉴别码——报文完整性4 数字签名——报文完整性、端点鉴别4.1 数字签名技术的基础4.2 公钥认证 5 案例——设计安全电子邮件系统 《计算机网络—自顶向下方法》&#xff08;…

Postman中读取外部文件

目录 前言&#xff1a; 一、postman中读取外部文件的格式 二、Postman中如何导入文件 三、在Postman读取导入的数据文件 前言&#xff1a; 在Postman中&#xff0c;您可以使用"数据文件"功能来读取外部文件&#xff0c;如CSV、JSON或Excel文件。这使得在测试中使用…

如何应用Nginx Rewrit实现网页跳转

目录 一、Nginx Rewrite 二、Rewrite功能 Rewrite跳转场景 Rewrite跳转实现 Nginx 跳转 pcre支持 重写模块 Rewrite实际场景 Rewrite命令/语法格式 flag标记说明 location分类 location优先级 rewrite和location相比 三、跳转案例 实现域名跳转 第一步 修改指…

一文详解gRPC框架

目录 RPC框架简介 简介 各种序列化协议优缺点 gRPC调用模式 gRPC跟ProtocolBuffers的关系 ProtocolBuffers协议 gRPC桩代码生成 gRPC线程模型 gRPC分层 gRPC开发经验 官网及快速开始 常见状态码 适用场景 适用 不适用 手写简易RPC框架 Dubbo学习笔记 一文详解…

【python】数据表转csv

文章目录 1 基本结构1.1 数据1.2 数据结构 2 代码3 tip 1 基本结构 1.1 数据 1.2 数据结构 2 代码 代码&#xff1a; import mysql.connector import csvdef getPerson():# 数据库初始化cnx mysql.connector.connect(userroot, passwordroot, databasetest)cursor cnx.cur…

IDEA启动tomcat控制台中文乱码问题

IntelliJ IDEA是很多程序员必备且在业界被公认为最好的Java开发工具&#xff0c;有很多小伙伴在安装完IDEA并且tomcat之后&#xff0c;启动tomcat会出现控制台中文乱码问题&#xff0c;如下图所示&#xff1a; 具体解决步骤&#xff1a; 一、修改当前 Web 项目 Tomcat Server…

SAP ALV批量修改列的数据

导语&#xff1a;最近在给ALV增加批量修改列的功能&#xff0c;需求是修改多列&#xff0c;以前经常自己画屏幕来实现&#xff0c;研究了一下&#xff0c;SAP有标准的函数&#xff0c;可以自动带出选择列的字段属性&#xff0c;搜索帮助等等&#xff0c;大大提高了便捷性。 函…

本地同步远程yum源,并保存到本地

1.修改本地/etc/yum.repos.d/内容为远程yum repo配置&#xff1b; # 1&#xff09;.备份原yum配置 mkdir -p /home/yum-bak && mv /etc/yum.repos.d/* /home/yum-bak/* # 2&#xff09;.修改目标yum配置 2.执行缓存&#xff0c;查看相关repoid是否正确 yum clean all …

QT学习笔记2--对象树

对象树 可以看到QWidet这几个类的父亲是QObject&#xff0c;在析构的时候是从下往上析构。 实例 创建类 验证的话&#xff0c;要先创建一个类&#xff0c;命名为pushbotton。 点击choose创建&#xff0c;类。 编写相关函数 构造函数 pushbotton::pushbotton(QWidget *pare…

华为云专家出品《深入理解边缘计算》电子书上线

华为开发者大会PaaS生态电子书推荐&#xff0c;助你成为了不起的开发者&#xff01; 什么是边缘计算&#xff1f;边缘计算的应用场景有哪些&#xff1f; 华为云出品《深入理解边缘计算》电子书上线 带你系统理解云、边、端协同的相关原理 了解开源项目的源码分析流程 学成能…

【Python】字符串格式化前世今生

▒ 目录 ▒ &#x1f6eb; 问题描述环境 1️⃣ 《%》方式格式化语法%后面的参数说明 2️⃣ str.format优点指定位置&#xff1a;参数可以不按顺序关键字参数列表索引对象数字格式化 3️⃣ f-string 语法语法示例格式化一个表达式转义符号格式化 datetime 对象 &#x1f6ec; 结…

C#传Bitmap到C++dll出现灰色图片的问题

如果直接将内存中的Bitmap 传给C,原图会失去颜色&#xff0c;如下&#xff1a; 代码如下&#xff1a; ImageCodecInfo jpgEncoder GetEncoder(ImageFormat.Jpeg);System.Drawing.Imaging.Encoder myEncoder System.Drawing.Imaging.Encoder.Quality;EncoderParameters myEncod…

给若依添加单元测试(二)

给若依添加单元测试 方案一&#xff08;简单&#xff09; 方案二&#xff08;异常困难但企业开发一般用这个&#xff09; 在 activity 子模块中添加单元测试 S1.在 src 目录下创建 test.java.MapperTests 文件 S2.将以下内容复制进去 import com.ruoyi.activity.Activity…