递归生成树形数据格式的问题

Question

需要写一个树形控件，同时把后台返回的数据数据格式处理成控件需要的格式
后台给了两个接口：一个是获取根节点以及根节点下的第一级节点的数据 另一个接口是当点击一个节点时获取该节点的子节点
效果图是这样的：

第一个接口返回的数据：里面的中国气象局是根节点，其余是中国气象局下的子节点

        [{
            "PID": "01",
            "ID": "0102",
            "NAME_RESID": "气象探测中心"
        },
        {
            "PID": "01",
            "ID": "0103",
            "NAME_RESID": "信息中心"
        },
        {
            "PID": "01",
            "ID": "0117",
            "NAME_RESID": "计财处"
        },
        {
            "PID": "01",
            "ID": "0118",
            "NAME_RESID": "大气成份中心"
        },
        {
            "ID": "01",
            "NAME_RESID": "中国气象局",
        },
        {
            "PID": "01",
            "ID": "0105",
            "NAME_RESID": "北京"
        },
        {
            "PID": "01",
            "ID": "0106",
            "NAME_RESID": "天津市气象局"
        },

第二个接口：比如点击信息中心，获取信息中心下的子节点网络室以及网络室下的子节点,调一次这个方法就获取了两级节点的数据

[
        {
            "PID": "0103",
            "ID": "010302",
            "NAME_RESID": "网络室"
        },
        {
            "PID": "010302",
            "ID": "01030202",
            "NAME_RESID": "网络安全"
        }
    ]

最终的数据结构是这样：

const treeData = [
    {
      ID: "01",
      NAME_RESID: "中国气象局",
      children: [
        {
          PID: "01",
          ID: "0103",
          NAME_RESID: "信息中心",
          children: [
            {
              PID: "0103",
              ID: "010302",
              NAME_RESID: "网络室",
              children: [
                {
                  PID: "010302",
                  ID: "01030202",
                  NAME_RESID: "网络安全",
                },
              ],
            },
          ],
        },
      ],
    },
  ];

这个递归的方法写了半天没写明白，请教下方法怎么写

Answer 1

/* arr1：根节点和一级节点数据
 * arr2：一级节点后的数据
 */

// 如果只有一个根节点，那么只要这么筛选一下就可以出一个包含根节点和一级节点的树了，不需要递归
// const data = [{...arr1.find(v => !v.PID), children: [...arr1.filter(v => v.PID)]}]
// 考虑有多个根节点的情况，先把根节点筛选出来
const data = [...arr1.filter(v => !v.PID)]
const getTree = (tree, arr) => {
    if (!arr.length) return
    tree.map((m, i) => {
        if (!m.children) m.children = []
        if (arr[0].PID === m.ID) {
            m.children.push(arr[0])
            return getTree(tree, arr.slice(1))
        }
        if (m.children.length) {
            return getTree(m.children, arr)
        }
    })
}

getTree(data, arr1.filter(v => v.PID)) // 组合根节点和一级节点
getTree(data, arr2) // 组合一级节点之后的N级节点

console.log(data)