Как я могу фильтровать и отображать массив одновременно? - PullRequest
Новая
       4

Как я могу фильтровать и отображать массив одновременно?

0 голосов
/ 29 октября 2019

Я пытаюсь упорядочить данные для подачи в 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
    }
  ];

Я считаю, что мне нужно как-то фильтровать, чтобы повернуть данные в соответствующий формат. Может ли кто-нибудь указать мне правильное направление? Спасибо.

Ответы [ 3 ]

3 голосов
/ 29 октября 2019

Вы можете взять хеш-таблицу и получить из нее значения. 

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; }
1 голос
/ 29 октября 2019

Вам нужно будет определить 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; }
0 голосов
/ 29 октября 2019

Вот довольно простой способ сделать это. Это очень похоже на ответ мистера Поливирла после того, как я его исправил. 

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