Question

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

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
    }
  ];

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

Answer 1

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

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; }

Answer 2

您将必须确定JSON['group']，以获得正确的JSON['flights']值设置。

通过查找当前减少的结果来进行配对，您可以更新值或在新项到达时添加新项。

var rawData = [
  { "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" }
];

console.log(processData(rawData));

function processData(data) {
  return data.reduce((result, item, index) => {
    let found = result.find(d => d.name === item['Month/Year']);
    if (found) {
      Object.assign(found, {
        gr : item['group'] === 'green' ? item['flights'] : found.gr,
        hv : item['group'] === 'blue' ? item['flights'] : found.hv
      });
    } else {
      result.push({
        name : item['Month/Year'],
        gr   : item['group'] === 'green' ? item['flights'] : null,
        hv   : item['group'] === 'blue'  ? item['flights'] : null,
      });
    }
    return result;
  }, []);
}

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

动态示例

var rawData = [
  { "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" }
];

console.log(processData(rawData, 'Month/Year', {
  gr : (item) => item['group'] === 'green' ? item['flights'] : null,
  hv : (item) => item['group'] === 'blue' ? item['flights'] : null
}));

function processData(data, key, mappers) {
  return data.reduce((result, item, index) => {
    let found = result.find(d => d.name === item[key]);
    if (found) {
      Object.keys(mappers).forEach(key => found[key] = mappers[key](item) || found[key]);
    } else {
      result.push(Object.keys(mappers).reduce((obj, key) => {
        return Object.assign(obj, { [key] : mappers[key](item) })
      }, { name : item[key] }));
    }
    return result;
  }, []);
}

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

Answer 3

这是一种相当简单的方法。更正后，它与Polywhirl先生的回答非常相似。

var newData = [];
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"
  }
];

data.forEach((item, index) => {
    let temp = {};
    let exists = newData.find(e => e.name === item['Month/Year']);
    if (exists) { // if the date exists in the array already
	if (item.group === 'green') {
            exists.gr = item.flights;
        } else {
    	    exists.hv = item.flights;
	}
    } else {
        temp.name = item['Month/Year'];
        if (item.group === 'green') {
            temp.gr = item.flights;
        } else {
    	    temp.hv = item.flights;
	}
        newData.push(temp);
    }
});

console.log(newData);

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

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

3 个答案:

动态示例