.get 调用后反应转换 JSON 数组答案

【问题标题】：React transform JSON array after .get call.get 调用后反应转换 JSON 数组
【发布时间】：2019-04-09 05:06:15
【问题描述】：

我有一个 React 组件，它从 AXIOS .get 调用和生成的 Object.keys().map 函数创建一个数组。这是初始 JSON 格式：

"graph": {
  "tree": {
    "5bd356a0-b1ee-4e83-a7f8-8164a1a5ba09": {
      "5bd356a0-b1ee-4e83-a7f8-8164a1a5ba09": [
         "5bd356a7-d9cf-4043-865c-6a443729f665",
         "5bd356a7-b8da-4eb9-8174-2aeaa8659cb9",
         "5bd356a7-7148-44c9-ae02-570dced70346"                                                               
        ]       
 }

如您所见，有一个嵌套数组。这是我最初运行的 .map 函数：

const resultTree = Object.keys(fullTree).map(key => ({
          id: key,
          label: key,
          ...fullTree[key]
        }));

这给了我一个输出：

 {id: "5bd356a0-b1ee-4e83-a7f8-8164a1a5ba09", label: "5bd356a0-b1ee-4e83-a7f8-8164a1a5ba09", 5bd356a0-b1ee-4e83-a7f8-8164a1a5ba09: Array(67)}

我想要做的是摆脱键的第三次出现（在这种情况下，“5bd356a0-b1ee-4e83-a7f8-8164a1a5ba09:”在数组之前，并给整个数组一个“端口”键。

【问题讨论】：

标签： arrays reactjs

【解决方案1】：

这有帮助吗？

const resultTree = Object.keys(fullTree).map(key => ({
  id: key,
  label: key,
  ports: fullTree[key][key]
}));

【讨论】：

【解决方案2】：

如果我正确理解了这个问题，这是一种方法：

const resultTree = Object.keys(fullTree).map(key => ({
          id: key,
          label: key,
          ports: fullTree[key][Object.keys(fullTree[key])[0]]
        }));

这假设 JSON 结构始终相同。如果你知道两个对象的键名总是相同的，你可以通过输入ports: fullTree[key][key]来缩短它

【讨论】：

谢谢！我会试试这个！