Three level menu data implementation, nested three-level menu data

 // 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