当前位置:网站首页>Three level menu data implementation, nested three-level menu data
Three level menu data implementation, nested three-level menu data
2022-07-07 05:43:00 【Bitter sea 123】
// Associate the database with (inner join) Query the data of multiple tables that are not nested but have nested relationships for processing , Get the nested parent secondary attribute with nested level, which cannot be repeated , The specific implementation is as follows :
// Query the data in the database through Association ( Format ):
let result=[
{
cid: 1,coll_name: ' Class A 1',pid: 1,projects_name: ' second level 1',qpid:1,common_name:' Level three 1'},
{
cid: 1,coll_name: ' Class A 1',pid: 1,projects_name: ' second level 1',qpid:2,common_name:' Level three 2'},
{
cid: 1,coll_name: ' Class A 1',pid: 2,projects_name: ' second level 2',qpid:3,common_name:' Level three 3'},
{
cid: 1,coll_name: ' Class A 1',pid: 2,projects_name: ' second level 2',qpid:4,common_name:' Level three 4'},
{
cid: 2,coll_name: ' Class A 2',pid: 3,projects_name: ' second level 3',qpid:5,common_name:' Level three 5'},
{
cid: 2,coll_name: ' Class A 2',pid: 3,projects_name: ' second level 3',qpid:6,common_name:' Level three 6'},
{
cid: 2,coll_name: ' Class A 2',pid: 4,projects_name: ' second level 4',qpid:7,common_name:' Level three 7'},
{
cid: 2,coll_name: ' Class A 2',pid: 4,projects_name: ' second level 4',qpid:8,common_name:' Level three 8'}
]
// The final data format :
let da = [
{
cid:1,
coll_name:' Class A 1',
childp:[
{
pid:1,
projects_name:' second level 1',
childq:[
{
qpid:1,
common_name:' Level three 1'
},
{
qpid:2,
common_name:' Level three 2'
},
]
},
{
pid:2,
projects_name:' second level 2',
childq:[
{
qpid:3,
common_name:' Level three 3'
},
{
qpid:4,
common_name:' Level three 4'
},
]
}
]
},
{
cid:2,
coll_name:' Class A 2',
childp:[
{
pid:3,
projects_name:' second level 3',
childq:[
{
qpid:5,
common_name:' Level three 5'
},
{
qpid:6,
common_name:' Level three 6'
},
]
},
{
pid:4,
projects_name:' second level 4',
childq:[
{
qpid:7,
common_name:' Level three 7'
},
{
qpid:8,
common_name:' Level three 8'
},
]
}
]
}
]
// Complete the implementation :
// Final data storage container
let datalist = []
// Save level 1 cid Array of ( Find all non repeating first level menus cid)
let cidarr = [...new Set(result.map(it => it.cid))]
// Process the data of the first level menu : By traversing the first level menu without repetition cidarr Array generates first level menu data , Traverse cidarr It can be determined that there are several first level menu items
cidarr.forEach((cid,ci)=>{
// Generate first level menu items :
let cobj = {
} // First level menu object
let carr = [] // From the original data result Find cid Equal to the current traversal of the first level menu cid The value of the data
result.map(item=>{
// find result in cid Equal to level one cid The data of each value in the array coexists to carr in
if(item.cid===cid){
carr.push(item)
}
})
cobj.cid = cid // Generate first level menu items cid
cobj.coll_name = carr[0].coll_name // Generate first level menu items coll_name
// Handle the value of the secondary menu attribute in the first level :
let pchildtemp = [] // Save the secondary menu data array of the current primary menu
// Find all non duplicate secondary pid
let pidarr = [...new Set(carr.map(itp => itp.pid))]
// According to the non repeated Level 2 of the current level pid Traverse to generate the second level of the current level :
pidarr.map(pid=>{
// Each secondary object
let pobj = {
}
let parr = [] // Save a two-level array
result.map(pitem=>{
// find result in cid Equal to level one id The value of each element in the array
if(pitem.pid===pid){
parr.push(pitem)
}
})
// Save the non repeated Level 3 under the current level 2 qpid
let qidarr = [...new Set(parr.map(pit => pit.qpid))]
// Find the array of the current level pid be equal to pidarr An object of the value in
carr.map(pits=>{
if(pits.pid === pid){
pobj.pid = pits.pid
pobj.projects_name = pits.projects_name
// Process level 3 data :
let qparr = []
qidarr.map(qid=>{
let qpobj = {
}
parr.map(qpit=>{
if(qpit.qpid ===qid){
qpobj.qpid = qpit.qpid
qpobj.common_name = qpit.common_name
}
})
qparr.push(qpobj)
})
pobj.qchild = qparr
}
})
pchildtemp.push(pobj)
})
cobj.pchild = pchildtemp
datalist.push(cobj)
})
// Print the results :
console.log(datalist)
Print data as shown in the figure below :
Tips : This article, pictures and other materials come from the Internet , If there is infringement , Please send an email to :[email protected] Contact the author to delete .
The author : misery
边栏推荐
- async / await
- JSP setting header information export to excel
- Introduction to distributed transactions
- 2pc of distributed transaction solution
- Digital innovation driven guide
- 什么是消息队列?
- JVM (19) -- bytecode and class loading (4) -- talk about class loader again
- 不同网段之间实现GDB远程调试功能
- 判断文件是否为DICOM文件
- 4. 对象映射 - Mapping.Mapster
猜你喜欢
《2022中国低/无代码市场研究及选型评估报告》发布
I didn't know it until I graduated -- the principle of HowNet duplication check and examples of weight reduction
爬虫练习题(三)
TCC of distributed transaction solutions
Lombok插件
Design, configuration and points for attention of network unicast (one server, multiple clients) simulation using OPNET
分布式事务介绍
Pinduoduo product details interface, pinduoduo product basic information, pinduoduo product attribute interface
什么是依赖注入(DI)
分布式事务解决方案之TCC
随机推荐
How to get free traffic in pinduoduo new store and what links need to be optimized in order to effectively improve the free traffic in the store
Dj-zbs2 leakage relay
ForkJoin最全详解(从原理设计到使用图解)
Taobao Commodity details page API interface, Taobao Commodity List API interface, Taobao Commodity sales API interface, Taobao app details API interface, Taobao details API interface
毕业之后才知道的——知网查重原理以及降重举例
Go language context explanation
拼多多新店如何获取免费流量,需要从哪些环节去优化,才能有效提升店内免费流量
Unity keeps the camera behind and above the player
ssm框架的简单案例
Life experience of an update statement
Web Authentication API兼容版本信息
得物客服一站式工作台卡顿优化之路
分布式事务介绍
[reading of the paper] a multi branch hybrid transformer network for channel terminal cell segmentation
论文阅读【Semantic Tag Augmented XlanV Model for Video Captioning】
Egr-20uscm ground fault relay
English语法_名词 - 所有格
拼多多商品详情接口、拼多多商品基本信息、拼多多商品属性接口
淘寶商品詳情頁API接口、淘寶商品列錶API接口,淘寶商品銷量API接口,淘寶APP詳情API接口,淘寶詳情API接口
Five core elements of architecture design