从 JSON 中移除 “$id” 和 “$values” 属性

从 json 中移除

本文将介绍如何从 JSON 数据中移除特定的属性,例如 $id 和 $values,从而获得更清晰的数据结构。这在处理由后端序列化的数据时非常有用,特别是当这些属性对于前端展示或进一步处理没有实际意义时。

解决方案:递归清理 JSON 属性

核心思路是编写一个递归函数,遍历 JSON 对象的每一个属性,判断属性名是否为需要移除的属性(例如 $id),并进行相应的处理。如果属性值是对象或数组,则递归调用该函数进行进一步处理。

以下是 JavaScript 实现的 sanitizeJson 函数:

function sanitizeJson(obj) {  // 对象是数组?递归处理每个元素  if (Array.isArray(obj)) {    return obj.map(sanitizeJson);  }  // 对象是非 null 对象  else if (typeof obj === 'object' && obj !== null) {    // 同时存在 '$id' 和 '$values' 属性?处理 '$values' 属性    if (obj.hasOwnProperty('$id') && obj.hasOwnProperty('$values')) {      return sanitizeJson(obj['$values']);    }    // 从 '$id' 属性创建一个新对象,并处理剩余的属性    return Object.fromEntries(      Object.entries(obj)        .filter(([key]) => key !== '$id')        .map(([key, value]) => [key, sanitizeJson(value)])    );  }  return obj;}

代码解释:

数组处理: 如果输入 obj 是一个数组,则使用 map 方法对数组中的每个元素递归调用 sanitizeJson 函数。对象处理: 如果 obj 是一个非 null 对象,则进行以下处理:$id 和 $values 同时存在: 如果对象同时拥有 $id 和 $values 属性,说明该对象是需要被简化的结构,直接递归处理 $values 属性的值,并将其返回。其他对象: 使用 Object.entries 方法将对象转换为键值对数组,然后使用 filter 方法过滤掉 $id 属性,再使用 map 方法对剩余的键值对递归调用 sanitizeJson 函数,最后使用 Object.fromEntries 方法将键值对数组转换回对象。其他类型: 如果 obj 不是数组或对象,则直接返回该值。

使用示例:

const json = '{"$id":"1","$values":[{"$id":"2","prop1":"result","prop2":"result","prop3":{"$id":"3","$values":[{"$id":"4","prop1":"result","prop2":null},{"$id":"4","prop1":"result","prop2":null}]}}]}';const jsonObject = JSON.parse(json);const result = JSON.stringify(sanitizeJson(jsonObject), null, 't');console.log(result);

输出结果:

[    {        "prop1": "result",        "prop2": "result",        "prop3": [            {                "prop1": "result",                "prop2": null            },            {                "prop1": "result",                "prop2": null            }        ]    }]

注意事项:

该函数会修改原始 JSON 对象的结构。如果需要保留原始数据,请先进行深拷贝。该函数只移除了 $id 属性。如果需要移除其他属性,可以在 filter 方法中添加相应的判断条件。此方法假设 $id 和 $values 总是成对出现,并且 $values 包含实际需要的数据。如果情况不同,需要调整代码逻辑。

总结:

通过使用 sanitizeJson 函数,可以有效地从 JSON 数据中移除 $id 和 $values 属性,从而获得更清晰、简洁的数据结构。这种方法适用于处理由后端序列化,并包含冗余属性的 JSON 数据,方便前端展示和进一步处理。根据实际需求,可以灵活修改该函数,以移除其他不需要的属性。

以上就是从 JSON 中移除 “$id” 和 “$values” 属性的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 16:16:26
下一篇 2025年12月20日 16:16:36

相关推荐

  • 使用自定义 Hook 在 React 组件间传递数据

    本文将介绍如何使用自定义 Hook 在 React 组件之间传递数据,尤其是在使用 React Router 进行页面跳转时。通过自定义 Hook,我们可以更有效地管理和共享数据,避免在不同组件中重复获取数据,提高代码的可维护性和可重用性。本文将提供详细的代码示例,并解释如何将数据传递到使用 Rea…

    2025年12月20日 好文分享
    000
  • 在不丢失事件监听器的情况下,高效替换DOM中的占位符

    本文旨在提供一种在不使用 `innerHTML` 的情况下,替换DOM中特定字符串的有效方法,从而避免移除已存在的事件监听器。通过使用 `NodeIterator`,我们可以直接操作文本节点和元素属性,实现占位符替换,同时保持网页的交互性。本文将提供详细的代码示例和注意事项,帮助开发者安全地实现DO…

    2025年12月20日
    000
  • React 文件上传后如何访问文件:完整教程

    本文档旨在帮助 React 开发者理解如何在文件上传后访问上传的文件。我们将通过示例代码,详细解释如何使用 event.target.files 对象来获取上传的文件,并解决常见的问题,例如在 useState 中立即打印文件信息时遇到的问题。本文档将提供清晰的步骤和代码示例,确保你能够轻松地实现文…

    2025年12月20日
    000
  • 在 DOM 中安全替换占位符:避免移除事件监听器

    本文介绍了一种在不使用 innerHTML 的情况下,安全地在 DOM 中替换占位符的方法。通过使用 NodeIterator,我们可以直接操作文本节点和元素属性,从而避免移除已绑定的事件监听器,保证网页的正常功能。同时,我们还提供示例代码,展示如何在 JavaScript 中实现这一功能,并讨论了…

    2025年12月20日
    000
  • 什么是 JavaScript 的装饰器在自动依赖注入框架中的应用?

    装饰器是用于类或属性的元数据标记,帮助DI框架识别依赖关系。通过@Injectable()等装饰器标注可注入类,结合emitDecoratorMetadata反射机制,容器自动解析构造函数参数并递归实例化依赖,实现自动装配。NestJS等框架利用此特性完成模块化与解耦,需开启experimental…

    2025年12月20日
    000
  • 如何用Node.js构建高并发的IO密集型应用?

    Node.js适合高并发IO密集型应用因其事件驱动与非阻塞IO特性,应使用异步API如fs.promises、axios及mysql2/promise避免阻塞;通过cluster模块利用多核CPU提升吞吐量,并用PM2管理进程;需控制并发数防止资源耗尽,采用p-limit或连接池限制;结合Redis…

    2025年12月20日
    000
  • 如何设计一个高可用的前端错误监控系统?

    前端错误监控系统需实现全类型错误捕获、高可靠上报、高可用服务处理、结构化存储分析及智能告警闭环,确保问题可发现、可定位、可修复。 前端错误监控系统的核心目标是及时发现、定位和预警用户端的问题,保障线上应用的稳定性。要设计一个高可用的系统,需从数据采集、上报机制、服务处理、存储分析到告警闭环全流程考虑…

    2025年12月20日
    000
  • React 应用管理员面板构建:从本地 JSON 到生产级数据管理

    本文旨在指导React应用开发者如何为电商网站等应用构建管理员面板,以实现数据(如商品卡片)的增删改查。文章将探讨从本地JSON文件管理的局限性,到利用浏览器端文件下载模拟数据更新的临时方案,再到后端服务和无头CMS(如Strapi)等生产级解决方案,帮助开发者选择最适合其项目需求的数据管理策略。 …

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

    PWA通过Service Worker实现离线支持,配合Web App Manifest达成可安装性,结合响应式设计与资源优化保障快速加载,并利用推送通知和后台同步增强交互;需妥善处理缓存策略、安装条件、性能指标及浏览器兼容性问题。 构建一个渐进式Web应用(PWA)的核心在于让Web应用具备类似原…

    2025年12月20日
    000
  • 如何设计一个响应式的、支持错误边界的数据获取Hook?

    设计一个响应式、支持错误边界的数据获取Hook,通过useState管理data、error、loading状态,用try/catch捕获异步异常,避免崩溃;在useEffect中发起请求,返回refetch函数供手动调用;默认不抛错,通过throwOnError选项控制是否抛出错误以配合Error…

    2025年12月20日
    000
  • 怎样使用JavaScript进行真正的多线程编程?

    JavaScript通过Web Workers实现并发,主线程与Worker线程隔离,通过消息传递通信;可使用SharedArrayBuffer实现共享内存,Node.js中worker_threads模块提供多线程能力。 JavaScript本身是单线程语言,运行在主线程上,但可以通过 Web W…

    2025年12月20日
    000
  • 如何构建一个零依赖、支持 Tree-shaking 的现代 JavaScript 库?

    答案是使用ES模块语法、正确配置package.json的module和exports字段、声明sideEffects并选择Rollup等工具输出多格式。具体做法包括:源码用export/import分离功能,通过exports定义导入规则,设sideEffects为false以支持tree-sha…

    2025年12月20日
    000
  • 如何构建一个基于JavaScript的低代码平台核心引擎?

    答案是构建基于JavaScript的低代码平台核心引擎需实现可视化配置到可执行代码的动态转换,关键包含五大模块:1. 设计统一JSON Schema结构的可视化组件模型,描述组件类型、属性与事件;2. 基于React/Vue实现运行时渲染引擎,通过组件注册表与通用渲染器将配置转为DOM并支持嵌套布局…

    2025年12月20日
    000
  • JavaScript 的 for…of 循环与 for…in 循环有何本质区别?

    for…in遍历对象的键,包括继承的可枚举属性;for…of遍历可迭代对象的值,如数组、字符串等,依赖Symbol.iterator。 for…of 和 for…in 虽然都是 JavaScript 中用于遍历的循环语句,但它们的用途和行为有本质区别。…

    2025年12月20日
    000
  • JavaScript 的模块联邦是如何实现微前端架构中的代码共享?

    模块联邦通过运行时动态共享代码,解决微前端重复打包与版本不一致问题。构建时配置exposes和remotes定义模块暴露与引用,Webpack 5生成远程入口,主应用运行时import加载远程模块,浏览器自动请求chunk并执行。支持共享UI组件(如UserCard)、工具函数、状态管理实例(Red…

    2025年12月20日
    000
  • 如何构建一个无框架依赖的高性能前端路由系统?

    使用 History API 和事件机制实现无框架前端路由,通过 pushState/replaceState 修改 URL 并监听 popstate 响应导航;构建轻量路由引擎,用正则预编译匹配路径并支持动态参数;结合懒加载、节流处理、DOM 缓存优化性能;拦截内部链接跳转避免刷新,保留原生锚点行…

    2025年12月20日
    000
  • JavaScript中的异步编程模式有哪些演进?

    JavaScript异步编程演进路径为:回调函数→Promise→async/await→事件循环与任务队列。1. 回调函数导致嵌套过深、错误处理困难;2. Promise通过链式调用和统一捕获改善可读性;3. async/await以同步语法提升逻辑清晰度;4. 事件循环机制(微任务优先于宏任务)…

    2025年12月20日
    000
  • JSON 字符串转 TypeScript 接口:类型转换的实用指南

    本文旨在解决将 JSON 字符串数据转换为 TypeScript 接口数据类型时,如何进行有效的类型转换,特别是将字符串转换为数字类型。我们将探讨使用 JSON.parse 的 reviver 函数进行转换的替代方案,并提供使用 map 函数进行类型转换的示例代码,以及最佳实践建议。 类型转换方法:…

    2025年12月20日
    000
  • Snowflake响应转换器中动态迭代的实现:UDF与存储过程的结合策略

    本文探讨了如何在Snowflake响应转换器中动态获取数据(如表行数)以控制迭代,解决了直接在转换器中调用存储过程的限制。核心策略是将原存储过程的逻辑重构为JavaScript用户定义函数(UDF),并在调用时将其结果作为参数传递给响应转换器,从而实现灵活的数据处理和迭代控制。 挑战:在Snowfl…

    2025年12月20日
    000
  • JavaScript模块化开发中有哪些最佳实践值得遵循?

    优先使用ES6模块语法,提升静态分析和打包效率;2. 模块职责单一,按功能拆分目录,避免巨型工具模块;3. 合理组织结构,利用别名和index.js简化路径;4. 避免循环依赖,可用动态导入或重构公共逻辑解决。 在JavaScript模块化开发中,遵循一些关键的最佳实践能显著提升代码的可维护性、复用…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信