JS tree structure, find out the parent set of each layer it belongs to according to the ID of the inner layer

Recently, there was a small demand , There is a tree structure , Then know one of the inner layers id, We need to find the parent node of each layer it belongs to , Including itself, of course . Because I haven't done this before , Then I thought about it , Perfect implementation , Then I also found a third-party library . Next, let's talk about my thoughts and handling methods

First, the last test data  

const tree = [
  {
    id: '1',
    parentId: 0,
    name: ' Shandong Province ',
    children: [
      {
        id: '1-1',
        parentId: '1',
        name: ' Jinan City ',
        children: [
          {
            id: '1-1-1',
            parentId: '1-1',
            name: ' Calendar area ',
            children: []
          },
          {
            id: '1-1-2',
            parentId: '1-1',
            name: ' Licheng District ',
            children: []
          }
        ]
      },
      {
        id: '1-2',
        parentId: '1',
        name: ' Heze City ',
        children: [
          {
            id: '1-2-1',
            parentId: '1-2',
            name: ' Yuncheng county ',
            children: []
          },
          {
            id: '1-2-2',
            parentId: '1-2',
            name: ' Juancheng county ',
            children: []
          }
        ]
      }
    ]
  }
]

Mode one ：  Do it yourself  

The process is divided into two steps ：

 ① I will flatten the tree structure first , Process as peer

 ②  Traverse the flat data above , First, according to the known id Find the first , Then according to its parentId Look again , Know where to find it parentId by 0（ No superior ） Until , It is also a recursive operation

Then two methods are pasted below , Corresponding to the above two steps  

// 1.  First flatten the tree structure , Process as peer 
function flatTree(tree) {
  const list = []
  tree.forEach(item => {
    const o = JSON.parse(JSON.stringify(item))
    if(o.children) delete o.children
    list.push(o)
    if(item.children && item.children.length) {
      list.push(...flatTree(item.children))
    }
  })
  return list
}

// 2.  Traverse the flat data above , First, according to id Find the first , Then according to its parentId Look again , Know where to find it parentId by 0 Until , It is also a recursive operation 

function getParentAreas(pid, list) {
  const target = []
  const o = list.find(item => item.id == pid) || {}
  if(JSON.stringify(o) != '{}') target.push(o)
  if(o.parentId) target.push(...getParentAreas(o.parentId, list))
  return target
}

The next step is to test ： 

console.log(getParentAreas('1-1-2', flatTree(tree)), '----->>>')
// [
//   { id: '1-1-2', parentId: '1-1', name: ' Licheng District ' },
//   { id: '1-1', parentId: '1', name: ' Jinan City ' },    
//   { id: '1', parentId: 0, name: ' Shandong Province ' }
// ]

Because it's based on the inside , So what we find is from the inner layer to the outer layer , If you want to turn around , Again reverse Just a second  

Then you can optimize the above code , Because two methods are used to process data , So I write these two methods into a class , We execute the above method when instantiating , Get the data we need directly  

class FindArrsById {
  constructor(id, tree) {
    this.id = id
    this.flatArr = this.flatTree.call(this, tree)
    this.parentAreas = this.getParentAreas.call(this, this.id, this.flatArr)
    this.getParentNames.bind(this)
  }

  flatTree(tree) {
    const list = []
    tree.forEach(item => {
      const o = JSON.parse(JSON.stringify(item))
      if(o.children) delete o.children
      list.push(o)
      if(item.children && item.children.length) {
        list.push(...this.flatTree(item.children))
      }
    })
    return list
  }

  getParentAreas(pid, list) {
    const target = []
    let o = list.find(item => item.id == pid) || {}
    if(JSON.stringify(o) != '{}') target.push(o)
    if(o.parentId) target.push(...this.getParentAreas(o.parentId, list))
    return target
  }

  //  This method is to get a set of fields 
  getParentNames(key) {
    return this.parentAreas.map(item => item[key]).reverse()
  }
}

Test it ： 

console.log(new FindArrsById('1-1-2', tree).getParentNames('name'), '----->>>')
// [ ' Shandong Province ', ' Jinan City ', ' Licheng District ' ]

Mode two ： use xe-utils Third party Library

xe-utils  GitHub Address https://github.com/x-extends/xe-utils

file ： https://vxetable.cn/xe-utils/#/ 

install ：  

npm install xe-utils

Use ： 

const XEUtiles = require('xe-utils') //  Or use ES6 Medium import Fine 

let searchTree = XEUtiles.searchTree(tree, item => item.id == '1-1-2', { children: 'children' })
console.log(searchTree, '----->>>')
// [
//   {
//     id: '1',
//     parentId: 0,
//     name: ' Shandong Province ',
//     children: [
//       {
//         id: '1-1',
//         parentId: '1',
//         name: ' Jinan City ',
//         children: [
//           {
//             id: '1-1-2',
//             parentId: '1-1',
//             name: ' Licheng District ',
//             children: []
//           }
//         ]
//       }
//     ]
//   }
// ]

This is also a powerful library , I don't actually use this , This is what I found after I finished it , There are many ways , Various data 、 Method conversion , With 6 It's really convenient  .

But generally speaking, I can handle it by myself , If it's not too complicated , You don't have to use it .