如何用JavaScript将嵌套JSON数组扁平化?

如何用javascript将嵌套json数组扁平化?

JavaScript处理嵌套JSON数组:将多层数据结构转换为扁平化格式

本文介绍如何使用JavaScript将复杂嵌套的JSON数据转换成更易于处理的扁平化结构。

问题:

假设您需要处理如下结构的JSON数据:

立即学习“Java免费学习笔记(深入)”;

{    "result": [        {            "name": "参数1",            "secondname": [                "高度",                "马赫数"            ]        },        {            "name": "参数2",            "secondname": [                "前向",                "垂向",                "侧向"            ]        }    ]}

目标是将其转换为以下扁平化格式:

{    "result": [        {            "name": "参数1",            "secondname": "高度"        },        {            "name": "参数1",            "secondname": "马赫数"        },        {            "name": "参数2",            "secondname": "前向"        },        {            "name": "参数2",            "secondname": "垂向"        },        {            "name": "参数2",            "secondname": "侧向"        }    ]}

解决方案:

利用reducemap方法可以高效地实现这一转换。

const jsonData = {    "result": [        {            "name": "参数1",            "secondname": [                "高度",                "马赫数"            ]        },        {            "name": "参数2",            "secondname": [                "前向",                "垂向",                "侧向"            ]        }    ]};const flattenedData = {    result: jsonData.result.reduce((accumulator, currentItem) => {        return accumulator.concat(currentItem.secondname.map(secondName => ({            name: currentItem.name,            secondname: secondName        })));    }, [])};console.log(flattenedData);

代码解释:

jsonData.result.reduce((accumulator, currentItem) => ... , [])reduce方法迭代jsonData.result数组。accumulator累积结果,初始值为一个空数组[]currentItem代表当前迭代的元素。currentItem.secondname.map(secondName => ({ name: currentItem.name, secondname: secondName }))map方法迭代currentItem.secondname数组,为每个secondname创建一个新对象,包含namesecondname属性。accumulator.concat(...):将新创建的对象数组添加到accumulator中。

这段代码简洁地实现了嵌套JSON数组的扁平化,避免了复杂的循环嵌套,提高了代码的可读性和可维护性。 最终的flattenedData变量将包含转换后的扁平化JSON数据。

以上就是如何用JavaScript将嵌套JSON数组扁平化?的详细内容,更多请关注创想鸟其它相关文章!

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

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 23:59:27
下一篇 2025年12月8日 14:36:34

相关推荐

  • 小程序调用相机失败提示权限未声明怎么办?

    小程序调用相机失败:权限未声明 在小程序开发中,调用相机功能时,可能会遇到“[component] : chooseavatar:fail api scope is not declared in the privacy agreement”错误。这是因为小程序缺少必要的权限声明。 解决方法 解决此…

    2025年12月19日
    000
  • 微信小程序调用原生能力失败:如何解决“chooseImage:fail api scope is not declared in the privacy agreement”错误?

    微信小程序“chooseImage” API权限问题及解决方法 在微信小程序开发中,使用chooseImage API选择图片时,可能会遇到chooseImage:fail api scope is not declared in the privacy agreement错误。 错误原因: 此错误…

    2025年12月19日
    000
  • 扫码登录后如何维持浏览器登录状态?

    如何保持扫码登录后的浏览器登录状态? 在使用扫码登录后,浏览器如何持续保持登录状态呢?这需要服务器与浏览器之间的一种有效通信机制。 常用的方法是采用令牌 (Token) 系统。当扫码登录成功后,服务器会生成一个独一无二的令牌,并将其发送给浏览器。此后,浏览器在每次请求服务器时都会携带该令牌。服务器则…

    2025年12月19日
    000
  • 小程序调用原生能力报错“api scope is not declared”?如何解决?

    小程序原生能力调用报错:api scope is not declared 小程序开发过程中,调用原生API(例如chooseAvatar选择头像)时,可能会遇到“api scope is not declared in the privacy agreement”的错误提示。 这是因为小程序缺少必…

    2025年12月19日
    000
  • 大型项目中el-dialog弹窗关闭延迟如何优化?

    提升大型项目el-dialog弹窗关闭速度 大型项目中,el-dialog弹窗因包含大量DOM元素,可能导致关闭延迟。本文提供两种优化方案,有效提升用户体验: 方法一:预先清空表格数据 在关闭弹窗前,清空表格数据,减少需要移除的DOM元素数量,从而加快关闭速度。 mounted() { this.$…

    2025年12月19日
    000
  • 小程序返回后,列表页数据未更新如何解决?

    小程序返回后数据刷新失效的常见问题及解决方案 许多小程序开发者都遇到过这个问题:从详情页返回列表页后,列表页数据未能及时更新。即使后台接口已返回最新数据,页面显示仍然滞后。 问题现象: 返回列表页后,数据接口已成功调用并返回更新后的数据。但列表页界面未显示更新后的数据,仍然显示旧数据。 代码示例及问…

    2025年12月19日
    000
  • 小程序调用拍照功能报错:隐私协议未声明怎么办?

    小程序调用原生API报错:隐私协议缺失 小程序开发过程中,调用系统能力(例如拍照)失败,错误信息通常指向问题根源。本文将分析一个因未声明隐私权限导致的 chooseavatar API 调用失败案例,并提供解决方案。 问题描述: 在小程序中使用 chooseavatar API 调用拍照功能,代码如…

    2025年12月19日
    000
  • 如何自定义Naive UI Modal组件遮罩层背景颜色?

    定制Naive UI Modal组件遮罩层背景色 Naive UI的Modal组件自带半透明遮罩层,但有时需要修改其背景色以匹配应用设计。直接覆盖样式(例如使用:deep或!important)可能无效,因为Naive UI使用了Shadow DOM。 以下两种方法可以有效解决这个问题: 方法一:局…

    2025年12月19日
    000
  • 如何用JavaScript将数组中groupId属性值相同的对象组合成新的数组?

    如何将数组中对象属性值相等的元素组合成新数组 问题描述: 给你一个 javascript 数组 arr,其中包含具有 groupid 属性的对象。你的任务是将对象属性值相等的元素组合成一个新的数组。 输入示例: const arr = [ { title: ‘标题1’, url: ‘url’, gr…

    好文分享 2025年12月19日
    000
  • JavaScript中如何根据对象属性值合并数组元素?

    JavaScript数组元素合并技巧:基于对象属性值 在JavaScript开发中,经常需要处理包含嵌套对象和数组的复杂数据结构。一个常见需求是根据对象的特定属性值,将数组中的元素进行合并。 让我们来看一个例子: const arr = [ { title: ‘标题1’, url: ‘url’, g…

    2025年12月19日
    000
  • JavaScript数组对象:如何合并属性值相同的元素?

    JavaScript数组对象:合并相同属性值的元素 本文介绍如何高效合并JavaScript数组中属性值相同的元素。 我们将使用reduce函数实现这一目标。 以下代码演示了如何将数组中groupId属性值相同的元素合并: const arr = [ { title: ‘标题1’, url: ‘ur…

    2025年12月19日
    000
  • Docker安装Redis报错:data_redis目录命名错误如何解决?

    Docker安装Redis报错:无效目录名 使用Docker命令安装Redis时,出现以下错误: docker: error response from daemon: create data_redis/redis.conf: “data_redis/redis.conf” includes in…

    2025年12月19日
    000
  • 异步请求中Referrer属性会丢失吗?

    探究异步请求中的Referrer属性 从网页B跳转到网页A,A页面发起异步请求时,Referrer属性是否会被携带?本文将对此进行深入探讨。 Referrer属性的工作机制 Referrer属性是HTTP请求头的一部分,指示请求的来源页面URL。通常,浏览器会在客户端发起请求时自动添加此属性。 异步…

    2025年12月19日
    000
  • Docker安装Redis报错:data_redis目录名无效怎么办?

    Docker安装Redis时遇到“data_redis目录名无效”错误 使用以下Docker命令安装Redis时,出现错误: docker run -v data_redis/redis.conf:/etc/redis/redis.conf -v data_redis/data:/data -d -…

    2025年12月19日
    000
  • 什么是TS中的浅副本和深拷贝

    深拷贝与浅拷贝详解 JavaScript 中复制对象或数组时,可以选择进行浅拷贝或深拷贝。理解两者差异至关重要,尤其在处理复杂数据结构时。 内存与引用机制 JavaScript 对象和数组是引用类型。将它们赋值给变量时,实际赋值的是内存地址,而非数据本身。 原始类型 (例如:字符串、数字、布尔值) …

    2025年12月19日
    000
  • TS中经常用于开发的数组方法

    本文介绍TypeScript Web开发中常用的数组方法,并附带示例和说明: 1. map() 用途: 创建一个新数组,新数组的每个元素都是原数组对应元素调用指定函数后的结果。用例: 数据转换,例如将数字数组转换为字符串数组。 2. filter() 用途: 创建一个新数组,新数组包含原数组中所有通…

    2025年12月19日
    000
  • 付款集成:使用OAuth进行安全令牌的身份验证

    Razorpay 付款集成:基于 OAuth 的安全访问 概述 本文介绍如何将 Razorpay 安全地集成到您的应用中,实现无缝的支付处理。Razorpay 支持基于 OAuth 的身份验证,允许应用安全地访问资源,无需泄露敏感凭据。我们将探讨 OAuth 如何确保 API 安全访问、令牌生成、处…

    2025年12月19日
    000
  • 网络监控市场有望在2亿美元达到2美元

    市场研究公司Credulous Research®发布的最新报告《网络监控市场——全球机遇分析与行业预测(2025-2032)》显示,全球网络监控市场预计将在2032年达到39亿美元,2025年至2032年的复合年增长率为7.3%。 报告指出,网络监控市场增长主要源于对解决停机问题的网络监控系统需求…

    2025年12月19日
    000
  • 边缘零信任(第3部分)

    利用JSON Web密钥集扩展JWT验证 上一篇文章中,我们学习了JSON Web令牌(JWT)的概念、创建方法和验证方式。第二部分则演示了如何在简单的Express服务器中使用JWT验证中间件。本篇将深入探讨非对称加密算法,特别是RS256算法,并重点介绍JSON Web密钥集(JWKS)。 术语…

    2025年12月19日
    000
  • 使用Seerbit接受多种货币:开发人员指南

    在全球化市场中,支持多种货币对企业吸引多元化客户至关重要。允许客户使用其偏好货币支付,不仅提升用户体验,还能显著提高交易转化率。 领先的支付网关 Seerbit Seerbit 提供强大的多货币功能,使企业能够流畅地处理来自全球各地的支付。Seerbit 的多货币功能: 支持的货币和地区 Seerb…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信