从 JSON react映射对象和嵌入对象并转换为单个数组以获取状态

IT技术 json reactjs
2021-05-10 17:17:40

我有一个 React 组件，它正在对 componentDidMount 上的 JSON 文件执行 axios.get 调用。JSON 有一个带有嵌入对象的对象，如下所示：

这是初始格式：

  "objects": {
      "5bd4a1a4-f806-4355-bf34-1b4054c2881e": {
         "type": "tosca.resourceTypes.TPE",
         "label": "BVI 610",
         "value": "801070217_BVI610"
        },

这是我最初调用 axios.get 后的 console.log。

5bd4a1a0-fd74-4a9f-b7e2-c5ab15360839: {type: "tosca.resourceTypes.TPE", label: 
"Bundle-Ether 33", value: "801070217_Bundle-Ether33"}

所以我可以成功地使用以下方法获得第一项的列表：

const finalTree = Object.keys(fullTree).map(({item}) => ({id: fullTree[item]}));

但我需要做的是将 finalTree 转换为一个数组，该数组还包含每个项目的类型、标签和值，然后将其放入状态。我一直在使用 jsonQuery 但它对我不起作用，而且在处理 JSON 数据方面我是一个相对的菜鸟。在此先感谢您的帮助！

2个回答

您可以使用Object.keys获取所有键的数组，map该数组并为每个键创建一个新对象，该对象包含其对象和键中的所有字段。

例子

const obj = {
  "5bd4a1a4-f806-4355-bf34-1b4054c2881e": {
    "type": "tosca.resourceTypes.TPE",
    "label": "BVI 610",
    "value": "801070217_BVI610"
  }
};

const result = Object.keys(obj).map(key => ({
  ...obj[key],
  id: key
}));

console.log(result);

const obj = {
  "5bd4a1a4-f806-4355-bf34-1b4054c2881e": {
    "type": "tosca.resourceTypes.TPE",
    "label": "BVI 610",
    "value": "801070217_BVI610"
  }
};

const result = Object.keys(obj).map(key => ({
  ...obj[key],
  id: key
}));

console.log(result);

其它你可能感兴趣的问题
上一篇如何在 React 中使用 MgtTeamsChannelPicker？ 下一篇将 zip 文件从 reactjs 上传到 nodejs