Convert list data to tree data

problem

Sometimes the interface may give you list data , How to convert list data into tree data ？？？

such as ：

Convert to ：

Ideas ：

• Recursive traversal found children, If pid Equal to the incoming id, Indicates that the current item is passed in id The child node of the corresponding item
• Closures save every traversal children

Realization

For a moment ts Detailed description of writing steps

const tranListToTreeData = <T, K>(list: T[], rootValue: string): K[] => {
    
  //  Store the data of child nodes 
  let arr: K[] = [];
  //  Traverse the list 
  list.forEach((item: {
      [key: string]: any }) => {
    
    //  If the current item item Of pid be equal to  roorValue, Describe current item item yes rootValue Child nodes of ( object type )
    if (item.pid === rootValue) {
    
      //  Find the child node of the current item , without , Will return an empty array 
      const children = tranListToTreeData(list, item.id);
      //  If the array is not empty , It means that the current item has child nodes , And all child nodes are  children  in 
      if (children.length) {
    
        //  Mount all child nodes of the current item to the properties of the current item  children  Next 
        item.children = children;
      }
      //  take  rootValue  All matching child nodes are placed in  arr  in 
      arr.push(item as K);
    }
  });
  //  Returns an array , Data of child nodes （ If the current item has no child nodes , Will return an empty array ）
  return arr;
};

If you need an adaptation ant-design-react Of Tree Components , Just be push Of item Switch to { key: item.id, title: item.name, children: item.children } that will do , Play by yourself .