Transform between tree and array in JS (hide the children field if the child node of the tree is empty)

Blogging is for taking notes

Preface

In the use of elmentUI perhaps antUI Isochronous cascader When cascading selectors , Tree structure required , Sometimes it is necessary to convert trees and arrays , The transformation of tree and array here will be sub children There is no need for empty time , Avoid choosing white pages in time and space （ As shown in Fig. 1 ）

---

One 、 Tree to array

   treeToArray(list, newArr = []) {
    
      list.forEach(item => {
    
        const {
     children} = item
        if (children) {
    
          delete item.children
          if (children.length) {
    
            newArr.push(item)
            return this.treeToArray(children, newArr)
          }
        }
        newArr.push(item)
      })
      return newArr
    }

Two 、 Array to tree

listToTree(list, parentId = null) {
    
      return list.filter(item => item.parentId === parentId).map(item => {
    
        let children= this.listToTree(list, item.id)
        if (children.length > 0) {
    
          return {
    
            ...item,
            children
          }
        } else {
    
          return {
    
            ...item
          }
        }
      })
    }

3、 ... and 、 Use

1.data Data defined in ( Trees )options

 options: [
         {
    
            value: 'zhinan',
            label: ' guide ',
            parentId:'0',
            id: "aa",
            children: [
               {
    
                  value: 'shejiyuanze',
                  label: ' Design principles ',
                  parentId:'aa',
                  id: "aa01",
                  children: [
                     {
    
                        value: 'yizhi',
                        label: ' Agreement ',
                        parentId:'aa01',
                        id: "aa0101",
                     }, 
                     {
    
                        value: 'fankui',
                        label: ' feedback ',
                        parentId:'aa01',
                        id: "aa0102",
                     }, 
                  ]
               }, 
            ]
         }, 
         {
    
            value: 'zujian',
            label: ' Components ',
            parentId:'0',
            id: "bb",
            children: [
               {
    
                  value: 'basic',
                  label: 'Basic',
                  parentId:'bb',
                  id: "bb01",
                  children: [
                     {
    
                        value: 'layout',
                        label: 'Layout  Layout ',
                        parentId:'bb01',
                        id: "bb0101",
                     }, 
                  ]
               }, 
               {
    
                  value: 'form',
                  label: 'Form',
                  parentId:'bb',
                  id: "bb02",
                  children: []
               },  
            ]
         }, 
      
         ],

2. Use tree to array （ Note that it is deleted by default when converting to an array children attribute ）

let list = this.treeToArray(this.options)
console.log("list",list)

2. Use array to turn the tree

let tree = this.listToTree(list,list[0].parentId)
console.log("tree",tree)

Notice here when children by [] when , Not mounted by default children attribute

---