Requirement: Transform into a tree structure

The ID value corresponds to the PID value, as shown in the figure below:

Data: [{label: 'zhang greatly, children: [{label:' small bright, children: [{label: 'xiao li'}, {label: 'great light'}]}]}].Copy the code

The original data

Const arr = [{id: '01, name: zhang greatly, pid: "', job: 'project manager'}, {id: '02, name:' small bright, pid: '01' job: 'product leader'}, {id: '03, name:' the little beauty, pid: '01' job: 'UIleader}, {id:' 04, name: 'old', pid: '01' job: "Technology leader"}, {id: '05, name:' Lao wang 'pid:' 01 'job:' test leader '}, {id: '06, name:' li ', pid: '01' job: 'operational leader'}, {id: '07, name: xiao li, pid:' 02 'job:' product managers'}, {id: '08', name: 'great light, pid:' 02 'job:' product managers'}, {id: '09' name: 'gao, pid:' 03 'job:' UI designers'}, {id: '10', name: 'xiao liu, pid:' 04 'job:' front end engineers'}, {id: '11', name: 'xiaohua, pid:' 04 'job:' back-end engineers'}, {id: '12' name: xiao li, pid: '04' job: 'back-end engineers'}, {id:' 13 ', name: 'xiao zhao, pid: '05' job: 'test engineers'}, {id:' 14 'name:' small strong ', pid: '05' job: 'test engineers'}, {id:' 15 ', name: 'small tao, pid:' 06 'job: 'operations engineers'}, {id:' 16 ', name: 'small only, pid:' 07 'job:' operations engineers'},]Copy the code

Analysis:

Finally, return a new array, define an array, and alternate OBj objects

Turn an array into a large object to wrap 16 objects named with their IDS

let result = []
      let obj = {}
      arr.forEach(item => {
        obj[item.id] = item
      })
Copy the code

Iterate over the object again

The result is undefined when an empty string appears when iterating through obj containing each of the pid items

When undefined, it is the outermost element

When parent is not undefined, add the children property to the empty array and push the item into the array

If parent can be found, the children property must be added to each array (a children property must be added every time traversal adds an empty array)

Arr. ForEach (item = > {/ / item. When the pid for "" returned underfined let the parent = obj [item. Pid] the if (the parent) {(parent. Children | | (parent.children = [])).push(item)} else {// Where push(item) is undefined result.push(item)}}) console.log(result)Copy the code

Encapsulate the above as a method for subsequent reuse

export function tree(arr) { const result = [] const obj = {} arr.forEach(item => { obj[item.id] = item }) Arr. ForEach (item = > {/ / item. When the pid for "" returned underfined const parent = obj [item. Pid] the if (the parent) {(parent. Children | | (parent.children = [])).push(item)} else {// push(item)}) return result}Copy the code

Method 2:

function getMenuList(authList) { let menu = [] let map = {} authList.forEach((m) => { m.children = [] map[m.id] = m if (m.id === ") {menu.push(m) // If the root is push directly to menu} else {map[m.id] && map[m.id].children.push(m)}}) return menu } console.log(getMenuList(arr))Copy the code

Add another method that uses recursion:

function filterArray(data, pid) {
        var tree = []
        var temp
        for (var i = 0; i < data.length; i++) {
          if (data[i].pid == pid) {
            var obj = data[i]
            temp = filterArray(data, data[i].id)
            if (temp.length > 0) {
              obj.children = temp
          }
            tree.push(obj)
        }
      }
        return tree
    }
console.log(filterArray(arr, ''))
Copy the code