关于javascript:js-实现将扁平化数据转换为渲染树形结构所需的数据

51次阅读

共计 2339 个字符，预计需要花费 6 分钟才能阅读完成。

/*
 * @Description: 
 * @version: 0630
 * @Author: YaoPengFei582
 * @Date: 2021-06-30 16:27:17
 * @LastEditors: YaoPengFei582
 * @LastEditTime: 2021-06-30 17:55:12
 */
const flatTree = [{ id: "1-1", label: "1- 1 级", parentId: "1"},
  {id: "2-1", label: "2- 1 级", parentId: "2"},
  {id: "3-1", label: "3- 1 级", parentId: "3"},
  {id: "1-2", label: "1- 2 级", parentId: "1"},
  {id: "2-2", label: "2- 2 级", parentId: "2"},
  {id: "3-2", label: "3- 2 级", parentId: "3"},
  {id: "1-3", label: "1- 3 级", parentId: "1"},
  {id: "2-3", label: "2- 3 级", parentId: "2"},
  {id: "3-3", label: "3- 3 级", parentId: "3"},
  {id: "1", label: "1 级", parentId: ""},
  {id: "2", label: "2 级", parentId: ""},
  {id: "3", label: "3 级", parentId: ""},
  {id: "1-1-1", label: "1-1- 1 级", parentId: "1-1"},
  {id: "2-1-1", label: "2-1- 1 级", parentId: "2-1"},
  {id: "3-1-1", label: "3-1- 1 级", parentId: "3-1"},
]

const resultTree = [
  {
    id: '1',
    parentId: "",
    label: "1 级",
    children: [
      {
        id: "1-1", label: "1- 1 级", parentId: "1", children: [{ id: "1-1-1", label: "1-1- 1 级", parentId: "1-1", children: [] },
          {id: "1-1-2", label: "1-1- 2 级", parentId: "1-1", children: [] },
        ]
      },
      {id: "1-2", label: "1- 2 级", parentId: "1", children: []
      },
    ]
  }, {
    id: '2',
    parentId: "",
    label: "2 级",
    children: []}, {
    id: '3',
    parentId: "",
    label: "3 级",
    children: []},
]

const firstLevelTree = flatTree.filter(node => !node.parentId)
firstLevelTree.forEach(node => {node.children = getChildNodeList(node.id, flatTree)
})

// 递归调用创立 ChildNodeList
function getChildNodeList(id, tree) {const childNodeList = tree.filter(node => node.parentId === id)
  return childNodeList.map(childNode => {
    return {
      ...childNode,
      children: getChildNodeList(childNode.id, tree)
    }
  })
}
console.log('firstLevelTree', firstLevelTree)

转换后的后果：

const result = [
  {
    "id": "1",
    "label": "1 级",
    "parentId": "","children": [
      {
        "id": "1-1",
        "label": "1- 1 级",
        "parentId": "1",
        "children": [
          {
            "id": "1-1-1",
            "label": "1-1- 1 级",
            "parentId": "1-1",
            "children": []}
        ]
      },
      {
        "id": "1-2",
        "label": "1- 2 级",
        "parentId": "1",
        "children": []},
      {
        "id": "1-3",
        "label": "1- 3 级",
        "parentId": "1",
        "children": []}
    ]
  },
  {
    "id": "2",
    "label": "2 级",
    "parentId": "","children": [
      {
        "id": "2-1",
        "label": "2- 1 级",
        "parentId": "2",
        "children": [
          {
            "id": "2-1-1",
            "label": "2-1- 1 级",
            "parentId": "2-1",
            "children": []}
        ]
      },
      {
        "id": "2-2",
        "label": "2- 2 级",
        "parentId": "2",
        "children": []},
      {
        "id": "2-3",
        "label": "2- 3 级",
        "parentId": "2",
        "children": []}
    ]
  },
  {
    "id": "3",
    "label": "3 级",
    "parentId": "","children": [
      {
        "id": "3-1",
        "label": "3- 1 级",
        "parentId": "3",
        "children": [
          {
            "id": "3-1-1",
            "label": "3-1- 1 级",
            "parentId": "3-1",
            "children": []}
        ]
      },
      {
        "id": "3-2",
        "label": "3- 2 级",
        "parentId": "3",
        "children": []},
      {
        "id": "3-3",
        "label": "3- 3 级",
        "parentId": "3",
        "children": []}
    ]
  }
]

正文完