三级菜单数据实现,实现嵌套三级菜单数据

 //将数据库中通过关联(inner join)查询多张表没有嵌套但有嵌套关系的数据进行处理,得到具有嵌套层级且嵌套的父级二级属性不可重复出现,具体实现如下://  通过关联查询到数据库的数据(格式):let result=[{cid: 1,coll_name: '一级1',pid: 1,projects_name: '二级1',qpid:1,common_name:'三级1'},{cid: 1,coll_name: '一级1',pid: 1,projects_name: '二级1',qpid:2,common_name:'三级2'},{cid: 1,coll_name: '一级1',pid: 2,projects_name: '二级2',qpid:3,common_name:'三级3'},{cid: 1,coll_name: '一级1',pid: 2,projects_name: '二级2',qpid:4,common_name:'三级4'},{cid: 2,coll_name: '一级2',pid: 3,projects_name: '二级3',qpid:5,common_name:'三级5'},{cid: 2,coll_name: '一级2',pid: 3,projects_name: '二级3',qpid:6,common_name:'三级6'},{cid: 2,coll_name: '一级2',pid: 4,projects_name: '二级4',qpid:7,common_name:'三级7'},{cid: 2,coll_name: '一级2',pid: 4,projects_name: '二级4',qpid:8,common_name:'三级8'}]// 最终要得到的数据格式:let da = [{cid:1,coll_name:'一级1',childp:[{pid:1,projects_name:'二级1',childq:[{qpid:1,common_name:'三级1'},{qpid:2,common_name:'三级2'},]},{pid:2,projects_name:'二级2',childq:[{qpid:3,common_name:'三级3'},{qpid:4,common_name:'三级4'},]}]},{cid:2,coll_name:'一级2',childp:[{pid:3,projects_name:'二级3',childq:[{qpid:5,common_name:'三级5'},{qpid:6,common_name:'三级6'},]},{pid:4,projects_name:'二级4',childq:[{qpid:7,common_name:'三级7'},{qpid:8,common_name:'三级8'},]}]}]// 完成实现:// 最终数据存放容器let datalist = []// 存一级cid的数组(找到所有不重复的一级菜单cid)let cidarr = [...new Set(result.map(it => it.cid))]// 处理一级菜单的数据:通过遍历循环不重复的一级菜单cidarr数组生成一级菜单数据,遍历cidarr可确定有几个一级菜单项cidarr.forEach((cid,ci)=>{// 生成一级菜单项:let cobj = {} // 一级菜单对象let carr = [] // 从原数据result中找到cid等于当前遍历的一级菜单的cid值的数据result.map(item=>{ // 找出result中cid等于一级cid数组中每项值的数据并存到carr中if(item.cid===cid){carr.push(item)}})cobj.cid = cid // 生成一级菜单项的cidcobj.coll_name = carr[0].coll_name // 生成一级菜单项的coll_name// 处理一级中的二级菜单属性的值:let pchildtemp = [] // 存当前一级菜单的二级菜单数据数组// 找到当前一级中所有不重复的二级的pidlet pidarr = [...new Set(carr.map(itp => itp.pid))]// 根据当前一级的不重复的二级pid遍历生成当前一级的二级:pidarr.map(pid=>{// 每个二级对象let pobj = {}let parr = [] // 存一种二级的数组result.map(pitem=>{ // 找出result中cid等于一级id数组中每个元素的值if(pitem.pid===pid){parr.push(pitem)}})// 存当前二级下不重复的三级qpidlet qidarr = [...new Set(parr.map(pit => pit.qpid))]// 找出当前一级的数组中pid等于pidarr中的值的某项对象carr.map(pits=>{if(pits.pid === pid){pobj.pid = pits.pidpobj.projects_name = pits.projects_name// 处理三级数据:let qparr = []qidarr.map(qid=>{let qpobj = {}parr.map(qpit=>{if(qpit.qpid ===qid){qpobj.qpid = qpit.qpidqpobj.common_name = qpit.common_name}})qparr.push(qpobj)})pobj.qchild = qparr}})pchildtemp.push(pobj)})cobj.pchild = pchildtempdatalist.push(cobj)})// 打印结果:console.log(datalist)

打印数据如下图:
在这里插入图片描述
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海

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

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

相关文章

sap相关性不能被编译_经典综述编译丨生物硝化抑制丨NAT PLANTS:现代农业中的氮转化和生物硝化抑制作用...

点击蓝字↑↑↑“农作未来(FarmingFuture)”,轻松关注,农作制度研究与您同行!编译:贾蓉 排版:王上原创微文,欢迎转发转载。文章信息原名:Nitrogen transformations in modern agriculture and …

Hadoop学习笔记(一)从官网下载安装包

Hadoop是一个分布式系统基础架构,由Apache基金会所开发。用户能够在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行快速运算和存储。要学习Hadoop从下载安装包開始打开Hadoop的官方站点,点击Download Hadoop或点击“G…

版本之间如何兼容_Spring Boot 2.4 版本的系统运行要求

名字Servlet 版本Tomcat 9.04.0Jetty 9.43.1Undertow 2.04.0Spring Boot 2.4.2-SNAPSHOT 版本要求至少 Java 8 及其以上版本,目前最高能够支持到 Java 15 (包含 15)的版本。 Spring 框架(Framework) 5.3.2 的版本或者以…

JavaScript异步处理问题,循环处理异步任务,并拿到数据,Nodejs循环异步任务接口处理

一、问题描述及解答: 在Promise(异步事件)中,通过遍历的方式处理数据,最后将带有数据的Promise通过return返回,在async/await处理机制中的到的数据是一个空数据组[]或不完整的数据,如下: 使用定时器后数据…

tomcat lifecyclelistener_大公司程序员带你死磕Tomcat系列(五)——容器

死磕Tomcat系列(5)——容器回顾在死磕Tomcat系列(1)——整体架构中我们简单介绍了容器的概念,并且说了在容器中所有子容器的父接口是Container。在死磕Tomcat系列(2)——EndPoint源码解析中,我们知道了连接器将请求过来的数据解析成Tomcat需要的ServletR…

获取当前周一日期_Excel工作表中最全的时间和日期函数,效率、办公必备

在Excel工作表中,函数也可以分为好几类,今天,小编带大家学习时间和日期函数。一、Excel工作表日期函数:Date。功能:返回特定日期的序列号。语法结构:Date(年,月,日)。目的:将制定的“年”、“月…

这样就算会了PHP么?-11

PHP中关于类的基本内容练习&#xff1a; <?phpclass SportObject{public $name;public $height;public $avirdupois;public function __construct($name, $height,$avirdupois) {$this->name $name;$this->height $height;$this->avirdupois $avirdupois;}func…

一个黑色全屏的计时器_我入手了一个1000多的智能手环,值吗?|Fitbit Charge 4测评...

入手Fitbit Charge 4了。作为一个喜欢晚上做运动的Boy&#xff0c;每次运动带着手机确实有够累赘&#xff0c;比如跑步的时候&#xff0c;掏手机看真的很麻烦&#xff0c;但手环只需抬手即可看时间、心率、步数这些&#xff0c;确实很方便。而且&#xff0c;有了手环之后&#…

python没有用_你可能没有在Python3中使用但却应该使用的东西

Python部落(python.freelycode.com)组织翻译&#xff0c;禁止转载&#xff0c;欢迎转发。 由于Python EOL的发布&#xff0c;许多人开始将他们的Python版本从2切换到3。不幸的是&#xff0c;我发现大多数Python3看起来仍然像Python2&#xff0c;但是要加括号(尽管在我之前的文章…

boost库 bind/function的使用

Boost::Function 是对函数指针的对象化封装&#xff0c;在概念上与广义上的回调函数类似。相对于函数指针&#xff0c;function除了使用自由函数&#xff0c;还可以使用函数对象&#xff0c;甚至是类的成员函数&#xff0c;这个就很强大了哈 #include <boost/function.hpp&g…

10恢复出厂设置_Mac系统如何恢复出厂设置

苹果Mac电脑在什么情况下需要恢复出厂设置呢&#xff1f;例如系统数据损坏、遇到无法卸载的恶意软件、错误更新导致、或者你只是想要闲鱼出售你的Mac电脑&#xff0c;这里系统派教你Mac如何恢复出厂设置。我们先简单将恢复出厂分成两步&#xff0c;一是擦除硬盘数据&#xff0c…

依赖注入的三种方式_Java核心知识 Spring原理十 Spring 依赖注入四种方式

构造器注入/*带参数&#xff0c;方便利用构造器进行注入*/ public CatDaoImpl(String message){ this. message message; } setter 方法注入public class Id { private int id; public int getId() { return id; } public void setId(int id) { this.id id; } } 静态工厂注入…

闪退没由报错_关于floor()报错注入,你真的懂了吗?

0x01 简述floor报错注入也有叫group报错注入的&#xff0c;都一样&#xff0c;指的都是他们。floor报错注入我想大多数人跟我一样&#xff0c;都是会用而不明白其中的原理。这个问题困扰了在下好长时间了&#xff0c;所以决定好好研究下&#xff0c;最终产出了这篇文章。0x02 环…

Photoshop(CC2020)未完

基础知识&#xff1a; 概括&#xff1a; Adobe Photoshop&#xff0c;简称PS&#xff0c;是由美国Adobe Systems开发和发行的图像处理软件。属于再加工型软件&#xff0c;是对很多素材的再次加工处理&#xff0c;并非原创型软件。 功能:Photoshop主要处理以像素构成的位图图像…

使用 做签名的post_基础实操|使用jmeter对聊天软件进行接口测试

前言准备上架一款聊天app&#xff0c;上架之前准备做一些测试工作&#xff0c;模拟用户进入房间&#xff0c;维持心跳&#xff0c;房间送礼&#xff0c;发言等行为(因为用的第三方im以及声网&#xff0c;这些都是基于http的)&#xff0c;也不是很懂测试&#xff0c;听老大说过一…

MySQL中主键的选择与磁盘性能

偶然看到了“Fotolog: Scaling the World\s Largest Photo Blogging Community”&#xff0c;才发现很多数据库的优化其实道理都很简单&#xff0c;至高境界是当你面对问题时&#xff0c;是否真正做出了自己的思考&#xff0c;而不仅仅只是经验主义的惯性使然&#xff1a;本文案…

matlab畸变校正代码_关于OpenCV中的去畸变

在opencv中&#xff0c;有关图像或像素点&#xff08;角点&#xff09;去畸变的函数有cv::undistort()&#xff0c;cv::getOptimalNewCameraMatrix()&#xff0c;cv::initUndistortRectifyMap()&#xff0c;remap()&#xff0c;cv::undistortPoints()。其中undistort可以直接对…

redis数据库简介、redis下载及安装(win64位)、node操作redis、redis实现短信校验注册接口

redis简介&#xff1a; 1:内存数据库,同时也能够保存数据到磁盘&#xff1b; 2:比其他的内存数据库有着更多的数据类型&#xff1a; 列表,集合,排序集合,哈希表等; 3:主从结构&#xff1a;数据可以备份到从服务器&#xff1b; 4: Redis数据操作速度快; 5:所有的操作都是原…

go func()和 go_Go的泛型真的要来了—如何使用以及它们是怎么工作的

点击上方蓝色“Go语言中文网”关注我们&#xff0c;领全套Go资料&#xff0c;每天学习 Go 语言你没看错&#xff0c;这里讲的就是 Go 中的泛型。只不过还没有正式发布&#xff0c;是基于草案设计的&#xff0c;已经是实现了可运行的版本。所以&#xff0c;泛型到来真的不远了&a…

bios设置_bios怎么设置显存 bios设置显存教程【图文】

有些用户可能会发现打开电脑系统信息窗口显示的内存容量与实际容量不同&#xff0c;例如系统内存显示4G&#xff0c;可用3.73G。那么不可用的那部分内存到哪里去了呢?其实是被集成显卡占用当做显存使用了。下面我们就通过 bios设置显存 来调整占用内存容量的大小&#xff0c;我…