Как я могу изменить структуру JSON на структуру диаграммы JS гистограммы JSON? - PullRequest
0 голосов
/ 16 июня 2020
[
  0: {flight: "Spicejet", range: "min", Jul 1: 2397, Jul 2: 2397, Jul 3: 2397},
1: {flight: "Spicejet", range: "max", Jul 1: 3045, Jul 2: 3045, Jul 3: 3045,},
2: {flight: "Spicejet", range: "med", Jul 1: 2789, Jul 2: 2789, Jul 3: 2789,},
3: {flight: "Indigo", range: "min", Jul 1: 3000, Jul 2: 3000, Jul 3: 3000,},
4: {flight: "Indigo", range: "max", Jul 1: 5000, Jul 2: 5000, Jul 3: 5000,},
5: {flight: "Indigo", range: "med", Jul 1: 4000, Jul 2: 4000, Jul 3: 4000,},
] 

в

labels: ["Jul 1","Jul 2","Jul 3"],
datasets: [
          {
            label: "SpiceJet",
            data: [3045,3045,3045],
          },
          {
            label: "airways",
            data: [5000,5000,5000],
          },
   ]

для диаграммы JS reactjs (линейная диаграмма). Схема js в этом случае сложна, пожалуйста, дайте какое-то решение в этом. В наборах данных [{данные: [получить только "максимальное" значение диапазона]}]

1 Ответ

1 голос
/ 16 июня 2020

Хотя вопрос относительно предполагаемого использования целевого формата остается неясным, фактическое преобразование для примера может быть легко выполнено.

Если предположить, что все входные элементы имеют одни и те же свойства данных (Jul * в этом случае), мы можем извлекать метки из произвольного входного элемента. Наборы данных могут быть получены путем сопоставления входных данных.

// a filter function to determine the data properties we're interested in
let dataPropertiesFilter = (k) =>  k !== "flight" && k !== "range";

let result = {
  // this assumes the first element has all data properties set and subsequent ones share the same properties
  labels: Object.keys(input[0]).filter(dataPropertiesFilter),

  // transforms each input element into the target format
  datasets: input.map(e => {
    return {
      label: e.flight,
      data: Object.keys(e)
        .filter(dataPropertiesFilter)
        .map(v => e[v])
    };
  })
};

Вот кодовый ящик для демонстрации: https://codesandbox.io/s/stack-overflow-q-62406854-vzxnq?file= / src / index. js

...