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

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

场景:后端返回列表数据,由前端根据业务需求完成树型数据转换,

常用于侧边导航菜单,下拉树型数据项等

js 复制代码
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
}

如:菜单

相关推荐
~无忧花开~21 分钟前
React生命周期全解析
开发语言·前端·javascript·react.js·前端框架·react
哈__38 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-maps
javascript·react native·react.js
cj814040 分钟前
Prompt,Agent,Skill,Mcp分别于langchain有什么关系
前端
SuperEugene1 小时前
Axios + Vue 错误处理规范:中后台项目实战,统一捕获系统 / 业务 / 接口异常|API 与异步请求规范篇
前端·javascript·vue.js·前端框架·axios
行走的陀螺仪1 小时前
手写 Vue3 极简 i18n
前端·javascript·vue.js·国际化·i18n
羽沢311 小时前
一篇简单的STOMP教程QAQ
前端·javascript·stomp
code_Bo1 小时前
使用AI完成Swagger接口类型在前端自动生成的工具
前端·后端·架构
加个鸡腿儿1 小时前
从"包裹器"到"确认按钮"——一个组件的三次重构
前端·vue.js·设计模式
Kel1 小时前
深入 OpenAI Node SDK:一个请求的奇幻漂流
javascript·人工智能·架构
子兮曰2 小时前
AI写代码坑了90%程序员!这5个致命bug,上线就炸(附避坑清单)
前端·javascript·后端