将扁平JSON数据转换为层级嵌套结构教程-js教程-PHP中文网

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

本文详细介绍了如何将包含层级信息的扁平JSON数组转换为具有父子关系的嵌套JSON结构。通过迭代处理数据并利用一个映射（map）来动态跟踪每个层级的最新节点，可以高效且准确地构建出任意深度的层级结构，适用于导航菜单、评论系统等场景的数据重组。

引言

在前端开发或数据处理中，我们经常会遇到需要将扁平化的数据结构转换为具有层级关系的树形结构。例如，一个导航菜单、一个评论列表或者一个文件目录，它们在数据库中可能以扁平列表的形式存储，但展示时需要呈现出清晰的父子嵌套关系。本教程将指导您如何利用javascript，将一个包含 level 字段的扁平json数组，转换为一个以 subnav 属性表示子节点的嵌套json结构。

问题分析

假设我们有以下扁平的JSON数据，其中每个对象都包含一个 title 和 metaData，metaData 中有一个 level 字段，表示该项在层级结构中的深度：

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结构，其中 level: 1 的项是顶级节点，level: N 的项是 level: N-1 的项的子节点，并通过 subNav 数组来表示：

[
  {
    "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
    }
  }
]

登录后复制

核心挑战在于，在遍历扁平数据时，如何准确地找到当前节点的父节点，并将其添加到正确的 subNav 数组中。简单的基于索引的判断（如 root[index - 1]）在处理多级嵌套时会失效，因为它无法正确追踪到不同层级的父节点。

核心思路

解决这个问题的关键在于维护一个机制，能够动态地记录每个层级的“当前父节点”。当遍历到一个新节点时，我们可以根据其 level 值，向上追溯到 level - 1 的父节点。

CodeBuddy

腾讯云AI代码助手

805

查看详情

我们可以使用一个映射（Map 或普通JavaScript对象）来实现这一目标。这个映射将以 level 作为键，以该层级的 最新处理过的节点 作为值。这样，当我们需要查找 level N 的父节点时，只需从映射中取出 level N-1 对应的节点即可。

实现步骤与代码

下面是实现这一转换的JavaScript函数：

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

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

引言

问题分析

核心思路

实现步骤与代码

代码解析

注意事项

总结

大家都在看：