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

 //将数据库中通过关联（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 // 生成一级菜单项的cid
      cobj.coll_name = carr[0].coll_name // 生成一级菜单项的coll_name

      // 处理一级中的二级菜单属性的值：
      let pchildtemp = [] // 存当前一级菜单的二级菜单数据数组

      // 找到当前一级中所有不重复的二级的pid
      let 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)
          }
        })

        // 存当前二级下不重复的三级qpid
        let qidarr = [...new Set(parr.map(pit => pit.qpid))]
        
        // 找出当前一级的数组中pid等于pidarr中的值的某项对象
        carr.map(pits=>{
          if(pits.pid === pid){
            pobj.pid = pits.pid
            pobj.projects_name = pits.projects_name
            // 处理三级数据：
            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)
    })
    // 打印结果：
    console.log(datalist)

打印数据如下图：

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海