React - 将对象转换为具有属性的对象数组

2024-01-10

我有以下对象

"data":{  
         "name 1":"a",
          "name 2":"b",
          "name 3":"b",
        },

如何转换为保留名称和数据“a”、“b”的对象数组,以便我可以为传入名称和数据的每个对象映射和渲染组件?


如果您使用reduce函数,您可以执行以下操作来实现您的目标

Object.keys(data).reduce((array, key) => {
    return [...array, {key: data[key]}]
}, [])

Reduce https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys是一个很酷的函数,它迭代数据并将其组合成一个项目(可以是 1 个对象、数组、整数等)。

Object.keys() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys是一种从当前对象获取每个键并能够迭代每个键的方法。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React - 将对象转换为具有属性的对象数组 的相关文章

  • 了解设置 JQuery 变量

    了解设置 JQuery 变量 最近 我通过在 StackOverflow 上遇到的另一个问题寻找帮助 了解到如何设置 JQuery 变量 如下所示 您可以通过简单地调用变量来创建输入字段 并且锚变量似乎也定义了样式 var clicked
  • 从数据 URI 解码 QR 码

    我尝试从数据 uri 中解码二维码 var dataUri data image gif base64 R0lGODdh9gD2AIAAAAAAAP ywAAAAA9gD2AAAC decodeQrCode dataUri cb 我已经尝试
  • TypeError: props.render 不是一个函数(React hook 形式)

    我将方法作为我用react hook form制作的形式的道具传递 当从react hook form添加控制器时 它给了我 TypeError props render不是一个函数 我在网上找不到任何解决方案 因此感谢任何帮助 impor
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
  • 使用 useReducers 调度函数发送多个操作?

    使用时是否可以通过调度函数发送多个动作useReducer挂钩反应 我尝试向它传递一组操作 但这会引发未处理的运行时异常 明确地说 通常会有一个初始状态对象和一个减速器 如下所示 const initialState message1 nu
  • 使用 jQuery/JS 打开时使
    标签的内容具有动画效果

    我只想要 HTML5 的内容details标记为 滑行 动画打开 而不是仅仅弹出打开 立即出现 这可以用 jQuery Javascript 实现吗 Fiddle http jsfiddle net 9h4Hq HTML
  • 如何防止 Iframe 在与浏览器交互后弄乱浏览器的历史记录?

    因此 就我而言 我使用 Iframe 将 Grafana 附加到我的页面 这为我提供了漂亮且易于使用的图表 可以注意到 每次在图表上进行放大或缩小 使用鼠标单击 交互后 Grafana 的 Iframe 都会在我的 Angular 页面上触
  • 在 Wordpress 站点中进行 AJAX 调用时出现问题

    我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题 该功能接受在表单上输入的邮政编码 使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接 我的第一个问题是关于我构建的表单 现在我的表单操作是空白的
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 如何抑制窗口鼠标滚轮滚动...?

    我正在开发嵌入页面中的画布应用程序 我有它 因此您可以使用鼠标滚轮放大绘图 但不幸的是 这会滚动页面 因为它是文章的一部分 当我在 dom 元素上滚动鼠标滚轮时 是否可以阻止鼠标滚轮在窗口上滚动 附加鼠标滚轮 不是 Gecko DOMMou
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 音频 blob 的 URL.createObjectURL 在 Firefox 中给出 TypeError

    我正在尝试从创建的音频 blob 创建对象 URLgetUserMedia 该代码在 Chrome 中可以运行 但在 Firefox 中存在问题 错误 当我打电话时stopAudioRecorder 它停在audio player src
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 在javascript中解析json - 长数字被四舍五入

    我需要解析一个包含长数字的 json 在 java servlet 中生成 问题是长数字被四舍五入 当执行这段代码时 var s x 6855337641038665531 var obj JSON parse s alert obj x
  • 通过 CDN 使用 Dojo 时如何加载自定义 AMD 模块?

    我正在使用 google 的 CDN 并尝试使用他们的加载程序加载我自己的 AMD 模块 我知道我做错了什么 但我被困住了 有任何想法吗
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • 为什么我不能在 AngularJS 中使用 data-* 作为指令的属性名称?

    On the t他的笨蛋 http plnkr co edit l3KoY3 p preview您可以注意到属性名称模式的奇怪行为data 在指令中 电话 Test of data named attribute br
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交

随机推荐

  • 运行 PHPUnit 时出错

    当我尝试运行时出现以下错误phpunit 从我的项目的测试文件夹中 PHP Fatal error Call to undefined method PHP CodeCoverage Filter getInstance in usr sh
  • 排除 Spring-data-rest 资源的某些字段

    我正在尝试将 Spring data rest 与 spring data mongodb 一起使用来公开只读资源 我遇到的问题是我想对我的文档有不同的看法 假设我在文档中有一些私人信息 我不想公开它们 所以我尝试了几种方法 我读了这篇文章
  • Plotly python离线-点击时访问url?

    是否可以配置一个plotly https plot ly python绘图以便用户在单击某个数据点时被带到特定的 url 我的预期用途是条形图 我希望能够单击一个条形图 然后转到一个 url 每个条形图都配置有不同的 url 我正在使用pl
  • 如何在 highcharter 中悬停时获得系列突出显示?

    Highcharts 具有这个巧妙的功能 当将鼠标悬停在柱形图中的条形上时 整个系列都会突出显示 最好实时查看here https www highcharts com demo column negative 在 R 包装器中highch
  • 使用 dev_appserver.py 进行覆盖不包括我的项目文件

    我运行以下命令覆盖范围3 6 https pypi python org pypi coverage Appengine 1 8 0 64 位 Ubuntu 13 04 上的 Python 2 7 4 coverage run dev ap
  • 如何在 C# 中检测任何 Excel 单元格的更改?

    我正在编写一个 Excel VSTO 插件 并且希望获取特定工作表中的单元格更改事件 如何才能做到这一点 检查Excel Application SheetChange事件处理程序 基本上 只要任何工作表中的任何单元格发生更改 它就会触发
  • 使用 Carrierwave 重命名上传的文件

    我正在使用 Carrierwave 上传文件 并且可以正常工作 我的问题是尝试更改上传文件的名称 在生成的 uploader rb 中有一个我认为我应该使用的方法 def filename something jpg if original
  • vim 键映射参考

    我刚刚安装了 command t 插件以及将其映射到 cmd t 而不是 Leader t 的内容 我对 vim 相当陌生 我不知道按键映射的符号是什么 在哪里可以找到在 vim 中映射组合键时使用的符号的参考 vim 的一个原则是 未记录
  • 如何在 javascript 中从弹出窗口进行打印?

    我有一个 Net 应用程序 它动态创建一个小型 HTML 页面 并使用 javascript document open 方法将其弹出在新窗口中 具有该功能的一切都工作正常 现在我想向打印该页面的 HTML 页面添加一个按钮 我尝试使用以下
  • Boolean.TRUE == myBoolean 与 Boolean.TRUE.equals(myBoolean)

    是否有过使用的情况equals Boolean and 处理时会返回不同的结果Boolean物体 Boolean TRUE myBoolean Boolean TRUE equals myBoolean 我在这里考虑的不是原始类型 而是布尔
  • 如何将 JFrame 放入 Java Swing 中现有的 JPanel 中?

    I have an open source java swing application like this http i47 tinypic com dff4f7 jpg http i47 tinypic com dff4f7 jpg 您
  • Wix - 安装然后运行 ​​powershell 脚本

    我知道有几篇关于 Wix 和 PowerShell 脚本的帖子 但在尝试了这些帖子中的解决方案后 我仍然没有得到我想要的结果 为了解释我的情况 我创建了一个 Wix 安装项目 它将从我的本地计算机 运行 Windows 7 获取 2 个 P
  • 针对特定文件扩展名的 Android 意图过滤器?

    我希望能够从网络下载具有特定扩展名的文件 并将其传递给我的应用程序来处理它 但我无法弄清楚意图过滤器 文件类型不包含在 mimetypes 中 我尝试使用
  • 在 Agda 中对 ST monad 进行建模

    最近这个所以问题 https stackoverflow com questions 33975270 can a st like monad be executed purely without the st library促使我在 Ha
  • 使用 Wordpress Super Cache 从缓存中排除动态值

    我正在使用超级缓存插件 一段时间以来 我一直在寻找解决方案 但没有成功 我需要禁用文件中一个函数的缓存functions php add shortcode custom counter example shortcode function
  • Webpack - Yaml -> JSON -> 提取文件

    我有一个包含一些翻译的 YAML 文件 我需要将这些文件转换为 JSON 文件 我尝试过使用yaml import loader and json loader但我收到错误 这是我的设置 const ExtractTextPlugin re
  • Java中的多线程解压

    因此 我尝试在 Java 中对 zip 文件进行只读访问 以多线程方式解压缩 因为我的 ZipFile ZipEntry 标准简单单线程解决方案使用枚举和输入流以及其他结果导致它采取大约需要整整五秒才能将一个 50 兆的 zip 文件解压到
  • Flutter:我应该在哪里调用 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark)

    在我的 flutter 应用程序中 屏幕 A 没有 AppBar 所以我打电话SystemChrome setSystemUIOverlayStyle SystemUiOverlayStyle dark 在构建中 在另一个具有 AppBar
  • 加载后删除程序集

    我正在尝试使用以下代码加载 MSIL 程序集 string PathOfDll PathOfMsILFile Dll Assembly SampleAssembly SampleAssembly Assembly LoadFrom Path
  • React - 将对象转换为具有属性的对象数组

    我有以下对象 data name 1 a name 2 b name 3 b 如何转换为保留名称和数据 a b 的对象数组 以便我可以为传入名称和数据的每个对象映射和渲染组件 如果您使用reduce函数 您可以执行以下操作来实现您的目标 O