首页 > web前端 > js教程 > 正文

将扁平化的 JSON 数据转换为嵌套结构的 JSON

DDD
发布: 2025-10-09 10:07:58
原创
226人浏览过

将扁平化的 json 数据转换为嵌套结构的 json

本文旨在提供一种将扁平化的 JSON 数据转换为具有层级嵌套结构的 JSON 数据的实用方法。通过 JavaScript 代码示例,详细讲解了如何根据 level 字段构建父子关系,从而实现 JSON 数据的层级化重构。 最终生成更易于理解和操作的树形结构数据。

在实际开发中,我们经常会遇到需要将扁平化的数据转换为树形结构的情况,尤其是在处理菜单、目录等具有层级关系的数据时。本文将提供一种使用 JavaScript 将扁平化的 JSON 数据转换为嵌套 JSON 结构的方法。 核心思路是根据数据中的层级关系(例如,level 字段)来构建父子关系,从而生成具有 subNav 属性的嵌套 JSON 结构。

实现方法

以下是一个 JavaScript 函数,可以将具有 level 属性的扁平 JSON 数组转换为嵌套的 JSON 结构:

Find JSON Path Online
Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

Find JSON Path Online 30
查看详情 Find JSON Path Online
function buildNestedStructure(data) {
  const topLevelItems = []; // 存储顶级节点
  const itemMap = {}; // 存储每个层级的最后一个节点,用于快速查找父节点

  for (const item of data) {
    const { title, metaData } = item;
    const newItem = { title, metaData };

    if (metaData.level === 1) {
      // 如果是顶级节点,直接添加到 topLevelItems
      topLevelItems.push(newItem);
    } else {
      // 否则,找到父节点并添加到其 subNav 属性中
      const parentLevel = metaData.level - 1;
      const parentItem = itemMap[parentLevel];

      if (!parentItem.subNav) {
        parentItem.subNav = [];
      }

      parentItem.subNav.push(newItem);
    }

    // 将当前节点添加到 itemMap 中,以便后续节点可以找到它作为父节点
    itemMap[metaData.level] = newItem;
  }

  return topLevelItems;
}

// 示例数据
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 }}
];


// 调用函数并打印结果
const output = buildNestedStructure(content);
console.log(JSON.stringify(output, null, 2));
登录后复制

代码解释:

  1. buildNestedStructure(data) 函数: 接收一个扁平化的 JSON 数组 data 作为输入。
  2. topLevelItems 数组: 用于存储所有顶级节点(level 为 1 的节点)。
  3. itemMap 对象: 用于存储每个层级的最后一个节点。 它的键是层级值(metaData.level),值是该层级的最后一个节点对象。这使得我们能够快速找到每个节点的父节点,而无需遍历整个树。
  4. 循环遍历 data 数组:
    • 如果当前节点的 level 为 1,则将其直接添加到 topLevelItems 数组中。
    • 否则,通过 itemMap 找到其父节点(level 比当前节点小 1 的节点),并将当前节点添加到父节点的 subNav 数组中。如果父节点没有 subNav 数组,则先创建它。
  5. itemMap[metaData.level] = newItem;: 在每次循环中,将当前节点添加到 itemMap 中,以便后续节点可以找到它作为父节点。
  6. 返回 topLevelItems 数组: 该数组包含了所有顶级节点,每个顶级节点可能包含 subNav 数组,从而形成完整的嵌套结构。

注意事项

  • 确保输入数据中的 level 属性是正确的,并且层级关系是连续的。例如,如果存在 level 为 3 的节点,那么必须存在 level 为 2 的父节点。
  • 该方法假设数据是按照层级顺序排列的,即父节点出现在子节点之前。如果数据不是按照层级顺序排列的,可能需要先对数据进行排序。
  • metaData 中可以包含其他属性,如 desc 和 displayOnOverview,这些属性会被完整地保留在输出的 JSON 结构中。

总结

通过使用 buildNestedStructure 函数,我们可以方便地将扁平化的 JSON 数据转换为嵌套的 JSON 结构,从而更易于处理和展示具有层级关系的数据。 这种方法的核心在于使用 itemMap 来快速查找父节点,从而避免了不必要的遍历,提高了效率。 此外,该方法也具有一定的灵活性,可以根据实际需求进行修改和扩展。

以上就是将扁平化的 JSON 数据转换为嵌套结构的 JSON的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号