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

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

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

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

实现方法

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

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));

代码解释:

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

注意事项

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

总结

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1527887.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 19:48:35
下一篇 2025年12月20日 19:48:45

相关推荐

  • JavaScript Deno运行时环境

    Deno 是由 Node.js 创始人 Ryan Dahl 推出的现代 JavaScript 与 TypeScript 运行时,核心特性包括默认安全机制、原生支持 TypeScript、基于 URL 的模块导入、内置标准库与开发工具。它使用 V8 引擎,强调安全性与简洁性,运行时需显式授权文件系统、…

    2025年12月20日
    000
  • JavaScript自动化测试脚本

    JavaScript自动化测试核心是通过测试框架验证功能,常用工具包括Jest、Mocha、Cypress和Puppeteer;以Jest为例编写加法函数测试用例并运行npm test;通过mock模拟异步API请求;结合Git Hooks与CI/CD实现持续集成,逐步覆盖核心逻辑。 JavaScr…

    2025年12月20日
    000
  • 深入理解JavaScript原型链与继承机制

    JavaScript的继承基于原型链,每个对象通过[[Prototype]]链接到其原型,属性查找会沿链向上搜索。构造函数的prototype指向原型对象,实例的__proto__指向构造函数的prototype。继承可通过组合或寄生组合实现,ES6的class和extends语法更简洁,但底层仍依…

    2025年12月20日
    000
  • JavaScript发布订阅模式架构

    发布订阅模式是一种松耦合的事件通信机制,通过on、emit、off方法实现对象间解耦,适用于组件通信、状态管理与异步协调,需注意命名规范与内存泄漏。 发布订阅模式(Pub-Sub)是一种在JavaScript中广泛使用的松耦合架构模式,它允许对象之间通过事件进行通信,而无需直接引用彼此。这种模式特别…

    2025年12月20日
    000
  • JavaScript Generator函数原理剖析

    Generator函数通过function*定义,使用yield暂停执行并返回遍历器对象;每次调用next()恢复执行,实现可中断的异步流程控制。 Generator 函数是 JavaScript 中一种特殊的函数类型,它允许你在函数执行过程中暂停和恢复。这种能力使得 Generator 在处理异步…

    2025年12月20日
    000
  • LangChain HNSWLib 向量存储机制详解:内存与本地持久化

    本文深入探讨LangChain中HNSWLib向量存储的内部机制。HNSWLib作为内存型向量存储,其数据实际存储在项目运行的宿主服务器内存中,而非LangChain官方服务器。同时,它支持将向量数据持久化到本地文件系统,确保数据的安全与可恢复性。 在构建基于大型语言模型(LLM)的应用时,向量存储…

    2025年12月20日
    000
  • 微前端架构设计与实现原理

    微前端是一种架构理念,旨在将单体前端拆分为多个独立自治的子应用,实现独立开发、部署与技术栈无关,通过路由分发、沙箱隔离、生命周期管理和样式隔离等机制,在运行时集成并保持解耦,常用框架包括qiankun、Module Federation等,适用于多团队协作的大型系统,但需权衡加载性能、调试复杂度和初…

    2025年12月20日
    000
  • 如何构建一个渐进式Web应用(PWA)并解决其核心挑战?

    答案:构建PWA需围绕Service Worker、Web App Manifest和HTTPS三大核心,实现离线访问、可安装性与安全基础。1. 通过Service Worker拦截请求并缓存资源,采用Cache First等策略提升性能,利用Workbox解决缓存更新与调试难题。2. 配置mani…

    2025年12月20日
    000
  • JavaScript数据库操作优化

    通过减少网络请求、合理使用缓存、优化本地数据处理和提升IndexedDB效率,可显著提升前端数据操作性能。 JavaScript本身不直接操作传统意义上的数据库(如MySQL、PostgreSQL),但在前端或Node.js环境中,我们常通过API与后端数据库交互,或在浏览器中使用IndexedDB…

    2025年12月20日
    000
  • JavaScript中员工数据排名表生成指南:Besson排名法处理并列情况

    本文旨在指导如何使用javascript为员工数据生成多维度排名表,重点解决并列情况下的平均排名(besson rank)计算问题。教程涵盖了从数据准备、核心排名算法的实现,到最终将排名结果动态渲染为html表格的完整流程,为开发者提供了一套专业且实用的数据处理方案。 引言 在企业管理或数据分析场景…

    2025年12月20日
    000
  • 在 VS Code 扩展中检测 Git HEAD 变更以响应终端操作

    在 vs code 扩展中直接监听终端执行的特定命令(如 `git checkout`)具有挑战性。一种高效且跨平台的方法是间接检测 git 仓库的状态变化。本文将详细介绍如何通过监控 git 仓库的 `.git/head` 文件,利用 `chokidar` 库实现对分支切换等关键 git 操作的响…

    2025年12月20日
    000
  • 响应式jQuery Marquee:在移动端初始化与桌面端销毁的实现指南

    本教程旨在解决jquery marquee插件在不同设备尺寸下响应式管理的问题。我们将学习如何利用`window.matchmedia`进行媒体查询,并结合数据属性(`data-*`)来精确控制插件的初始化与销毁,确保在窗口大小调整时,marquee效果能在移动端自动启用,在桌面端自动停用,从而避免…

    2025年12月20日
    000
  • JavaScript边缘计算应用

    JavaScript 在边缘计算中的应用正变得越来越广泛,主要得益于其轻量、灵活以及在服务端(Node.js)和浏览器端的通用性。边缘计算强调在靠近数据源的位置处理信息,减少延迟、节省带宽并提升响应速度。JavaScript 凭借其生态系统和运行时环境,正在多个边缘场景中发挥关键作用。 1. 边缘函…

    2025年12月20日
    000
  • 深入理解React类组件中setState与事件处理器的this绑定

    本文探讨了react类组件中`setstate`方法在事件处理器中失效的常见问题。核心原因在于javascript中`this`上下文的动态性,导致事件回调中`this`不再指向组件实例。教程将详细介绍如何通过在构造函数中绑定事件处理器来正确维护`this`上下文,确保`setstate`能按预期更…

    2025年12月20日
    000
  • Next.js应用中Firebase订单数据获取为空的解决方案

    本文旨在解决Next.js应用中,结合`next-auth`和Firebase获取用户订单数据时,即使查询成功但数据数组却为空的问题。核心在于确保`getSession`正确获取到包含用户邮箱的会话信息,并对会话对象进行健壮性检查,以避免因`session.user.email`缺失导致Fireba…

    2025年12月20日
    000
  • 响应式jQuery Marquee:根据屏幕宽度动态初始化与销毁

    本教程将详细介绍如何利用jquery和`window.matchmedia`实现一个响应式的跑马灯(marquee)效果。我们将学习如何根据屏幕宽度动态地初始化跑马灯插件,并在宽度条件不满足时安全地销毁它,避免重复初始化导致的潜在问题,从而优化用户体验和页面性能。 引言 在现代网页设计中,响应式布局…

    2025年12月20日
    000
  • 理解Next.js page.tsx 组件的Props限制及正确用法

    本文旨在解决next.js `app` 路由中 `page.tsx` 文件因默认导出类型不匹配而导致的编译错误。我们将深入探讨next.js对 `page.tsx` 组件props的严格限制,阐明为何自定义props不被允许,并提供正确的类型定义以及将自定义props逻辑重构为标准react组件的解…

    2025年12月20日
    000
  • 如何构建一个支持黑暗模式的响应式界面?

    首先利用CSS媒体查询检测系统偏好,再通过CSS变量定义主题颜色,并结合JavaScript实现手动切换与本地存储,确保响应式布局在不同设备与主题下均保持良好可读性与视觉效果。 支持黑暗模式的响应式界面需要兼顾视觉适配、用户体验和系统偏好。核心在于利用 CSS 媒体查询检测用户系统设置,并通过灵活布…

    2025年12月20日
    000
  • JavaScript AOP编程实践

    AOP(面向切面编程)通过在不修改原函数的前提下插入前置或后置逻辑,实现日志、权限等横切关注点的解耦;JavaScript借助高阶函数、方法劫持、Proxy等方式可灵活实现before、after增强,提升代码复用与维护性。 JavaScript 中的 AOP(面向切面编程)并不是语言原生支持的范式…

    2025年12月20日
    000
  • JavaScript Proxy与Reflect API详解

    Proxy用于拦截对象操作,Reflect提供默认行为方法,二者结合可实现日志、校验、响应式等场景,提升元编程能力。 JavaScript中的Proxy和Reflect是ES6引入的两个重要特性,它们为对象操作提供了更强大的元编程能力。Proxy可以拦截并自定义对象的基本操作,而Reflect则提供…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信