将扁平JSON数据转换为层级嵌套结构教程

const content = [
  { title: "Item 1", metaData: { "level": 1, "desc": "Some Desc 1", "displayOnOverview": true }},
  { title: "Item 2", metaData: { "level": 2, "desc": "Some Desc 2", "displayOnOverview": true }},
  { title: "Item 3", metaData: { "level": 2, "desc": "Some Desc 3", "displayOnOverview": false }},
  { title: "Item 4", metaData: { "level": 3, "desc": "Some Desc 4", "displayOnOverview": true }},
  { title: "Item 5", metaData: { "level": 1, "desc": "Some Desc 5", "displayOnOverview": true }}
];

[
  {
    "title": "Item 1",
    "metaData": {
      "level": 1,
      "desc": "Some Desc 1",
      "displayOnOverview": true
    },
    "subNav": [
      {
        "title": "Item 2",
        "metaData": {
          "level": 2,
          "desc": "Some Desc 2",
          "displayOnOverview": true
        }
      },
      {
        "title": "Item 3",
        "metaData": {
          "level": 2,
          "desc": "Some Desc 3",
          "displayOnOverview": false
        },
        "subNav": [
          {
            "title": "Item 4",
            "metaData": {
              "level": 3,
              "desc": "Some Desc 4",
              "displayOnOverview": true
            }
          }
        ]
      }
    ]
  },
  {
    "title": "Item 5",
    "metaData": {
      "level": 1,
      "desc": "Some Desc 5",
      "displayOnOverview": true
    }
  }
]

const content = [
  { title: "Item 1", metaData: { "level": 1, "desc": "Some Desc 1", "displayOnOverview": true }},
  { title: "Item 2", metaData: { "level": 2, "desc": "Some Desc 2", "displayOnOverview": true }},
  { title: "Item 3", metaData: { "level": 2, "desc": "Some Desc 3", "displayOnOverview": false }},
  { title: "Item 4", metaData: { "level": 3, "desc": "Some Desc 4", "displayOnOverview": true }},
  { title: "Item 5", metaData: { "level": 1, "desc": "Some Desc 5", "displayOnOverview": true }}
];

/**
 * 将扁平JSON数组转换为嵌套层级结构
 * @param {Array<Object>} data - 包含level信息的扁平数据数组
 * @returns {Array<Object>} - 转换后的嵌套层级结构
 */
function buildNestedStructure(data) {
  // 存储最终的顶级节点
  const topLevelItems = [];
  // 存储每个层级的最新节点，键为level，值为对应的节点对象
  const itemMap = {};

  for (const item of data) {
    // 复制原始数据，避免直接修改
    const newItem = { ...item }; // 浅拷贝，如果metaData内部有复杂对象，需要深拷贝

    const currentLevel = newItem.metaData.level;

    if (currentLevel === 1) {
      // 如果是顶级节点，直接添加到结果数组
      topLevelItems.push(newItem);
    } else {
      // 如果不是顶级节点，找到其父节点
      const parentLevel = currentLevel - 1;
      const parentItem = itemMap[parentLevel];

      if (parentItem) {
        // 如果父节点不存在subNav数组，则初始化
        if (!parentItem.subNav) {
          parentItem.subNav = [];
        }
        // 将当前节点添加到父节点的subNav中
        parentItem.subNav.push(newItem);
      } else {
        // 理论上，如果数据结构良好，不应该出现找不到父节点的情况
        // 在实际应用中，这里可以添加错误处理或日志记录
        console.warn(`Warning: Parent for item "${newItem.title}" (level ${currentLevel}) not found.`);
      }
    }

    // 更新itemMap，将当前节点设置为其所在层级的最新节点
    // 这样，后续同层级或更深层级的节点可以找到它作为父节点
    itemMap[currentLevel] = newItem;
  }

  return topLevelItems;
}

const output = buildNestedStructure(content);
console.log(JSON.stringify(output, null, 2));