One of the simplest flat array and tree structure conversion algorithm

Arrays and Structures

Flat array

[{"id": "01"."name": "Zhang Da"."pid": ""."job": "Project Manager"
  },
  {
    "id": "."."name": "Little light"."pid": "01"."job": "Product leader"
  },
  {
    "id": "3"."name": "Little beauty"."pid": "01"."job": "UIleader"
  },
  {
    "id": "04"."name": "Old"."pid": "01"."job": "Technology leader"
  },
  {
    "id": "5"."name": "Wang"."pid": "01"."job": "Test leader"
  },
  {
    "id": "6"."name": "老李"."pid": "01"."job": "Operational leader." "
  },
  {
    "id": "7"."name": "Small beautiful"."pid": "."."job": "Product Manager"
  },
  {
    "id": "08"."name": "Light"."pid": "."."job": "Product Manager"
  },
  {
    "id": "09"."name": "Gao"."pid": "3"."job": "UI Designer"
  },
  {
    "id": "10"."name": "Liu"."pid": "04"."job": "Front End Engineer"
  },
  {
    "id": "11"."name": "Wah"."pid": "04"."job": "Back-end engineer"
  },
  {
    "id": "12"."name": "Xiao li"."pid": "04"."job": "Back-end engineer"
  },
  {
    "id": "13"."name": "Xiao zhao."."pid": "5"."job": "Test Engineer"
  },
  {
    "id": "14"."name": "Small strong"."pid": "5"."job": "Test Engineer"
  },
  {
    "id": "15"."name": "Tao"."pid": "6"."job": "Operation and Maintenance Engineer"}]Copy the code

A tree structure

[{"id": "01"."name": "Zhang Da"."pid": ""."job": "Project Manager"."children": [{"id": "."."name": "Little light"."pid": "01"."job": "Product leader"."children": [{"id": "7"."name": "Small beautiful"."pid": "."."job": "Product Manager"."children": []}, {"id": "08"."name": "Light"."pid": "."."job": "Product Manager"."children": []}]}, {"id": "3"."name": "Little beauty"."pid": "01"."job": "UIleader"."children": [{"id": "09"."name": "Gao"."pid": "3"."job": "UI Designer"."children": []}]}, {"id": "04"."name": "Old"."pid": "01"."job": "Technology leader"."children": [{"id": "10"."name": "Liu"."pid": "04"."job": "Front End Engineer"."children": []}, {"id": "11"."name": "Wah"."pid": "04"."job": "Back-end engineer"."children": []}, {"id": "12"."name": "Xiao li"."pid": "04"."job": "Back-end engineer"."children": []}]}, {"id": "5"."name": "Wang"."pid": "01"."job": "Test leader"."children": [{"id": "13"."name": "Xiao zhao."."pid": "5"."job": "Test Engineer"."children": []}, {"id": "14"."name": "Small strong"."pid": "5"."job": "Test Engineer"."children": []}]}, {"id": "6"."name": "老李"."pid": "01"."job": "Operational leader." "."children": [{"id": "15"."name": "Tao"."pid": "6"."job": "Operation and Maintenance Engineer"."children": []}]}]Copy the code

Transformation algorithm

“Flat Array” to “Tree Structure”

function treeing (arr) {
  let tree = []
  const map = {}
  for (let item of arr) {
    // a new structure with children
    letnewItem = map[item.id] = { ... item,children: []}if (map[item.pid]) { // Add a new element to the children of the parent node if the parent node is saved into the map
      let parent = map[item.pid]
      parent.children.push(newItem)
    } else { // There is no parent node, add the parent node to the root node
      tree.push(newItem)
    }
  }
  return tree
}
Copy the code

“Tree” to “Flat Array”

function flatten (tree, arr = []) {
  tree.forEach(item= > {
    const{children, ... props} = item// Add attributes except children
    arr.push(props)
    if (children) {
      // Recursively adds all nodes to the result set
      flatten(children, arr)
    }
  })
  return arr
}
Copy the code