时间戳

首页 > 解决方案 > 如何同时过滤和映射数组？

javascript - 如何同时过滤和映射数组？

问题描述

我正在尝试安排数据以输入 Recharts。不确定如何正确重新排列数据。Recharts 为我测试过的折线图提供了这种结构：

data = [
    {
      name: '2017-01-01', gr: 4000, hv: 2400
    },
    {
      name: '2017-01-02', gr: 3000, hv: 1398
    },
    {
      name: '2017-01-03', gr: 2000, hv: 9800
    }
  ];

我有一个 json 文件，我需要重新排列成类似的格式：

[
    {
      "Month/Year": "2019-09",
      "group": "blue",
      "flights": "668620"
    },
    {
        "Month/Year": "2019-10",
        "group": "blue",
        "flights": "662520"
    },
    {
        "Month/Year": "2019-09",
        "group": "green",
        "flights": "662520"
    },
    {
        "Month/Year": "2019-10",
        "group": "green",
        "flights": "678520"
    }
]

我正在尝试通过映射来处理数据：

processData = (data) => {
    return data.map(e => ({
      name: e['Month/Year'],
      gr: e[THIS WOULD BE green IN group],
      hv: e[THIS WOULD BE blue IN group]
    }));
  };

期望的结果：

data = [
    {
      name: '2019-09', gr: 662520, hv: 668620
    },
    {
      name: '2019-10', gr: 678520, hv: 662520
    }
  ];

我相信我必须以某种方式过滤以将数据转换为适当的格式。有人可以指出我正确的方向吗？谢谢你。

标签： javascriptreactjsrecharts

解决方案

您可以获取一个哈希表并从中获取值。

var data = [{ "Month/Year": "2019-09", group: "blue", flights: "668620" }, { "Month/Year": "2019-10", group: "blue", flights: "662520" }, { "Month/Year": "2019-09", group: "green", flights: "662520" }, { "Month/Year": "2019-10", group: "green", flights: "678520" }],
    result = Object.values(data.reduce((r, o) => {
        var name = o["Month/Year"];
        r[name] = r[name] || { name };
        r[name][{ green: 'gr', blue: 'hv'}[o.group]] = o.flights;
        return r;
    }, {}));

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

推荐阅读