如何将一维嵌套数组转换为包含子级属性的树状数据？

如何将嵌套数组转换为具有子级属性的数据格式

本文将演示如何将给定的一维嵌套数组：

[
  {
    "id": 1,
    "key": "",
    "name": "系统管理",
    "level": 1,
    "type": 1,
    "icon": "",
    "code": "a001",
    "parentcode": "",
    "num": "a-1",
  },
  {
    "id": 7,
    "key": "",
    "name": "日志管理",
    "level": 1,
    "type": 1,
    "icon": "",
    "code": "a004",
    "parentcode": "",
    "num": "a-7",
  },
  {
    "id": 8,
    "key": "roleadd",
    "name": "角色管理",
    "level": 2,
    "type": 1,
    "icon": "",
    "code": "b001",
    "parentcode": "a001",
    "num": "1-1",
  },
  {
    "id": 14,
    "key": "logomanage",
    "name": "日志管理",
    "level": 2,
    "type": 1,
    "icon": null,
    "code": "e001",
    "parentcode": "a004",
    "num": "1-1",
  },
]

转换为包含子级属性的树状数据：

[
  {
    "id": 1,
    "key": null,
    "name": "系统管理",
    "level": 1,
    "icon": null,
    "num": "a-1",
    "children": [
      {
        "id": 8,
        "key": "roleadd",
        "name": "角色管理",
        "level": 2,
        "type": 1,
        "icon": null,
        "code": "b001",
        "parentcode": "a001",
        "num": "1-1",
     }
   ]
  },
  {
    "id": 7,
    "key": null,
    "name": "日志管理",
    "level": 1,
    "type": 1,
    "icon": null,
    "num": "a-7",
    "children": [
      {
        "id": 14,
        "key": "logomanage",
        "name": "日志管理",
        "level": 2,
        "type": 1,
        "icon": null,
        "code": "e001",
        "parentcode": "a004",
        "num": "1-1",
      }
    ]
  },
]

步骤

AI Room Planner

AI 室内设计工具，免费为您的房间提供上百种设计方案

下载

1. 创建对象映射：创建一个对象，使用 parentcode 作为键，将每个子级元素映射到其父级元素。
2. 遍历数组：遍历给定数组中的每个元素。
3. 检查映射：查看映射中是否存在该元素的 parentcode。
4. 如果存在，则添加孩子：如果存在，则将该元素作为子级添加到其父级的 children 数组中。
5. 否则，创建根元素：如果不存在，则创建新的根元素，将其添加到结果数组中并将该元素作为其子级添加到 children 数组中。

javascript 代码示例：

const data = [
  {
    "id": 1,
    "key": "",
    "name": "系统管理",
    "level": 1,
    "icon": "",
    "code": "A001",
    "parentCode": "",
    "num": "A-1",
  },
  // ...
];

const parentMap = {};

data.forEach((item) => {
  parentMap[item.parentCode] = parentMap[item.parentCode] || [];
  parentMap[item.parentCode].push(item);
});

const result = [];

data.forEach((item) => {
  if (parentMap[item.code]) {
    parentMap[item.parentCode].forEach((child) => {
      item.children = item.children || [];
      item.children.push(child);
    });
  } else {
    result.push(item);
  }
});

上述代码将创建具有子级属性的树状数据结构，按照给定数组中的层次结构组织元素。