JS----前端将列表数据转树型数据

news2024/10/6 16:30:03

前端将列表数据转树型数据

场景:后端返回列表数据,由前端根据业务需求完成树型数据转换,
常用于侧边导航菜单,下拉树型数据项等

export function listToTree(data: []) {
	var map: any = {},
		tree: any = []

	data.forEach((item: any) => {
		delete item?.children
		delete item?.params

		if (!item.label) {
			item.label = item?.name ?? item?.title
		}
		if (!item.value) {
			item.value = item?.id
		}

		map[item?.id] = item
	})

	/**
	 * 以原数据量循环拼装父,子级
	 */
	data.forEach((item: any) => {
		var parent = map[item?.pid]
		if (parent) {
			(parent.children || (parent.children = [])).push(item)
		} else {
			tree.push(item)
		}
	})

	return tree
}

如:菜单
在这里插入图片描述

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

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

相关文章

virtualbox 网络设置实现主机和虚拟机互相访问

前言 一般来说,virtualbox 虚拟机的上网模式是 NAT。这样虚拟机可以上网并访问宿主机,但宿主机无法访问虚拟机,也无法 ping 通。下面介绍双网卡模式,实现虚拟机和宿主机能够互相访问 ping 通。 双网卡模式 进入虚拟机的网络设置…

【MySQL】A01、性能优化-语句分析

1、数据库优化方向 A、SQL及索引优化 根据需求写出良好的SQL,并创建有效的索引,实现某一种需求可以多种写法,这时候我们就要选择一种效率最高的写法。这个时候就要了解sql优化 B、数据库表结构优化 根据数据库的范式,设计表结构&…

webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用

本文讲的全部知识点,都是和webpack相关的。如果你之前有疑问,那本文一定能帮你搞清楚。 问题来源一般是类似下面代码(webpack.json中): "scripts": {"dev": "cross-env NODE_ENVdevelopmen…

【快速入门 LVGL】-- 5、Gui Guider界面移植到STM32工程

上篇,我们已学习:【快速入门 LVGL】-- 4、显示中文 工程中添加了两个按钮作示范。运行效果如图: 本篇:把Gui Guider设计好的界面,移植到STM32工程。 特别地: 在使用Gui Guider进行界面设计时,应…

探索SAVI:土壤调整植被指数的意义与应用

​随着遥感技术的不断发展,植被指数成为了评估地表植被覆盖和健康状况的重要工具之一。其中,SAVI(Soil Adjusted Vegetation Index,土壤调整植被指数)作为一种针对土壤表面反射率进行调整的植被指数,在土地…

Linux内核之hook机制:call_void_hook用法实例(六十一)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

使用2023版BurpSuite半自动化Autorize进行垂直越权测试【图文教程】

本人在使用时BurpSuite v2023.12时,查阅网上资料,发现网上大多是旧版,而旧版跟新版在界面上有些许调整。故记录BurpSuite v2023.12使用教程,用于后续本人回顾。 Autorize工具安装 Extensions→BApp Store→Autorize→Download J…

HTML5+CSS3小实例:炫彩荧光线条登录框

实例:炫彩荧光线条登录框 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-sca…

parallels desktop19.3最新版本软件新功能详细介绍

Parallels Desktop是一款运行在Mac电脑上的虚拟机软件&#xff0c;它允许用户在Mac系统上同时运行多个操作系统&#xff0c;比如Windows、Linux等。通过这款软件&#xff0c;Mac用户可以轻松地在同一台电脑上体验不同操作系统的功能和应用程序&#xff0c;而无需额外的硬件设备…

如何在 Flutter 中制作多种颜色的 TextField

TextField widget 本身并不施加任何样式。相反&#xff0c;它会要求 TextEditingController 生成一个样式化的 TextSpan 对象&#xff0c;即一段带有样式的文本。 TextField 将其样式传递给 TextEditingController &#xff0c;默认实现只是将其放入 TextSpan 对象中&#xff0…

揭开ChatGPT面纱(2):OpenAI主类源码概览

文章目录 〇、使用OpenAI的两个步骤一、初始化方法__init__()1.源码2.参数解析 二、提供的接口1.源码2.接口说明主要接口说明 OpenAI版本1.6.1 〇、使用OpenAI的两个步骤 在上一篇博客中&#xff0c;我实现并运行了一个OpenAI的demo&#xff0c;我们可以发现&#xff0c;想要使…

多商家AI智能名片商城系统(开源版)——构建高效数字化商业新生态

一、项目概述 1、项目背景 1&#xff09;起源 随着数字化时代的快速发展&#xff0c;传统名片和商城系统已经难以满足企业日益增长的需求。商家需要更高效、更智能的方式来展示自己的产品和服务&#xff0c;与消费者进行互动和交易。同时&#xff0c;开源技术的普及也为开发…

科林Linux_3 进程

一、进程基础 操作系统基础的执行单元&#xff0c;调度单位 静态数据&#xff1a;只占用磁盘空间&#xff0c;不消耗其他资源 动态数据&#xff1a;磁盘 内存 CPU 1. 编译器将源码编译成一个可执行文件.exe/.elf 2. 运行后系统生成一个同名的进程 程序是进程的静态表现&a…

用 LM Studio 1 分钟搭建可在本地运行大型语言模型平台替代 ChatGPT

&#x1f4cc; 简介 LM Studio是一个允许用户在本地离线运行大型语言模型&#xff08;LLMs&#xff09;的平台&#xff0c;它提供了一种便捷的方式来使用和测试这些先进的机器学习模型&#xff0c;而无需依赖于互联网连接。以下是LM Studio的一些关键特性&#xff1a; 脱机&am…

JavaScript:js基础2

BOM Browser Object Model浏览器对象模型 允许JavaScript与浏览器进行对话 Js将浏览器的各个组成部分封装为对象 可以通过操作BOM对象来实现操作浏览器中的部分 location.href "" //操作浏览器地址栏中的地址BOM中包含了以下对象 window:浏览器窗口对象 Navi…

Leetcode算法训练日记 | day34

专题九 贪心算法 一、K次取反后最大化的数组和 1.题目 Leetcode&#xff1a;第 1005 题 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择同一个…

python爬虫 - 爬取html中的script数据(36kr.com新闻信息)

文章目录 1. 分析页面内容数据格式2. 使用re.findall方法&#xff0c;爬取新闻3. 使用re.search 方法&#xff0c;爬取新闻 1. 分析页面内容数据格式 打开 https://36kr.com/ 按F12&#xff08;或 在网页上右键 --> 检查&#xff08;Inspect&#xff09;&#xff09; 找…

HarmonyOS开发案例:【相机开发】

基本概念 相机是OpenHarmony多媒体进程提供的服务之一&#xff0c;提供了相机的录像、预览、拍照功能&#xff0c;支持多用户并发取流。 在进行应用的开发前&#xff0c;开发者应了解以下基本概念&#xff1a; 视频帧 视频流指的是将一系列图片数据按照固定时间间隔排列形成的…

开发日志(20240422):一次以为是跨域但并不是跨域的问题排查记录

1. 日志 在前后端联调的时候&#xff0c;遇到了报错&#xff0c;如下图所示&#xff08;现在再看感觉非常简单了&#xff09;&#xff0c;发现前一个请求通过了&#xff0c;但是第二个请求报错&#xff0c;然后看到 strict-origin-when-cross-origin 条件反射的认为是跨域配置…

iOS - 多线程-GCD-队列组

文章目录 iOS - 多线程-GCD-队列组1. 队列组1.1 基本使用步骤 iOS - 多线程-GCD-队列组 开发过程中&#xff0c;有时候想实现这样的效果 多个任务并发执行所有任务执行完成后&#xff0c;进行下一步处理&#xff08;比如回到主线程刷新UI&#xff09; 1. 队列组 可以使用GC…