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

时间:2018-07-27 10:18:15

标签: javascript arrays json reactjs object

我对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中做到这一点的任何建议?

2 个答案:

答案 0 :(得分:2)

您可以在数组上使用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);

答案 1 :(得分: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);