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
}

如:菜单

相关推荐
薛定e的猫咪9 分钟前
2026 年 4 月实测:OpenAI Codex 保姆级教程,从安装到 MCP、Skills 与多智能体协作
前端·数据库·人工智能
I love studying!!!13 分钟前
Web应用程序:用户账户
前端·数据库·sqlite
whuhewei13 分钟前
React性能优化
前端·react.js·性能优化
m0_7381207214 分钟前
渗透知识ctfshow——Web应用安全与防护(三)
android·前端·安全
窝子面16 分钟前
NestJs+MongoDB+Deepseek+Langchain实现ai聊天助手
javascript·数据库·人工智能·mongodb
下北沢美食家24 分钟前
React面试题2
前端·react.js·前端框架
吴声子夜歌29 分钟前
ES6——Calss详解
javascript·es6·原型模式
摇滚侠29 分钟前
HTML CSS 演示小米 logo 的变化 border-radius 属性设置圆角
前端·css·html
❆VE❆31 分钟前
虚拟列表原理与实战运用场景详解
前端·javascript·css·vue.js·html·虚拟列表
weixin_4080996733 分钟前
【实战教程】EasyClick 调用 OCR 文字识别 API(自动识别屏幕文字 + 完整示例代码)
前端·人工智能·后端·ocr·api·安卓·easyclick