使用 .map、.filter、.reduce 将 JSON 数据重新排列为兼容格式答案

【问题标题】：Rearrange JSON data into compatible format using .map, .filter, .reduce使用 .map、.filter、.reduce 将 JSON 数据重新排列为兼容格式
【发布时间】：2018-07-27 10:18:14
【问题描述】：

我对 JavaScript 很陌生，所以请耐心等待。我得到了以下形式的不可更改的 JSON 数据：

export const JSON = [
        {
            fruit: "Banana",
            name: "Tony",
            tree: {
            type: [
                {
                   number: 123,
                   desc: {
                      color: "yellow"
                   }
                }
            ]
            }
        }
]

我需要将它重新排列成（我只有水果、数字和颜色作为类型）：

export const formatted = [
    {fruit: "banana", number: 123, color: "yellow"}
];

关于如何在 JS React 中执行此操作的任何建议？

【问题讨论】：

您是否尝试过您提到的任何方法？发生了什么？ SO 不是代码编写服务；你的代码在哪里，它到底有什么问题？

标签： javascript arrays json reactjs object

【解决方案1】：

您可以在数组上使用map，并为每个元素返回一个仅包含您感兴趣的数据的新对象。

示例

const data = [
  {
    fruit: "Banana",
    name: "Tony",
    tree: {
      type: [
        {
          number: 123,
          desc: {
            color: "yellow"
          }
        }
      ]
    }
  }
]

const result = data.map(obj => ({
  fruit: obj.fruit,
  number: obj.tree.type[0].number,
  color: obj.tree.type[0].desc.color,
}));

console.log(result);

【讨论】：

【解决方案2】：

您可以通过简单地调用 Array#map() method 来做到这一点，您的代码应该是这样的：

const res = json.map(x => {
  return {
    "fruit": x.fruit,
    "number": x.tree.type[0].number,
    "color": x.tree.type[0].desc.color
  }
});

演示：

const json = [{
  fruit: "Banana",
  name: "Tony",
  tree: {
    type: [{
      number: 123,
      desc: {
        color: "yellow"
      }
    }]
  }
}];


const res = json.map(x => {
  return {
    "fruit": x.fruit,
    "number": x.tree.type[0].number,
    "color": x.tree.type[0].desc.color
  }
});
console.log(res);

【讨论】：