Как сопоставить массив JSON с двумя разными массивами для диаграммы - PullRequest
Новая
       12

Как сопоставить массив JSON с двумя разными массивами для диаграммы

2 голосов
/ 05 ноября 2019

Я использую диаграмму chartjs в своем угловом приложении. И я использую стандартный результат веб-API для диаграмм. 

this.httpClient.get(this.REST_API_SERVER).subscribe((data: any[])=>{
  console.log(data);

})

данные: 

[
   { "label": "city-1", "data1": 200},
   { "label": "city-2", "data1": 450},
   { "label": "city-2", "data1": 950},
]

или 

[
   { "label": "city-1", "data1": 200, "data2": 60 },
   { "label": "city-2", "data1": 450, "data2": 40 },
   { "label": "city-3", "data1": 950, "data2": 78 },
]

Я имею в виду, label этометка диаграммы и data1, data2 или data3 - значения диаграммы.

Поэтому я хочу разделить эти данные ответа на два разных массива, как показано ниже. 

var labels = [ "city-1", "city-3", "city-3"];
var data = [ 
              { "data": [ 200, 450, 950 ], "label": "data1" },
              { "data": [ 60,  40,  78 ], "label": "data2" }
           ];

возможно ли это в угловом отображении rxjs?

Ответы [ 2 ]

2 голосов
/ 05 ноября 2019

Вы можете использовать lower () для преобразования данных в требуемый формат.

Итерация по заданным данным, и если элемент с текущей меткой существует, то добавить значения к его dataмассив, если не создать новый элемент массива с текущими значениями. 

let input = [
   { "label": "city-1", "data1": 200, "data2": 60 },
   { "label": "city-2", "data1": 450, "data2": 40 },
   { "label": "city-3", "data1": 950, "data2": 78 },
];

let result = input.reduce((acc, curr) => {
  acc.labels = acc.labels || [];
  acc.labels.push(curr.label);
  acc.data = acc.data || [];

  Object.entries(curr).forEach(([key, value]) => {
    if (key !== "label") {
      let item = acc.data.find(item => item.label === key);
      if (item) {
        item.data.push(value);
      } else {
        acc.data.push({
          "data": [value],
          "label": key
        });
      }
    }
  });

  return acc;
}, {});

let labels = result.labels;
let data = result.data;

console.log("Labels", labels);
console.log("Data", data);
1 голос
/ 05 ноября 2019

Вы можете найти здесь рабочий скрипт: 

const list = [
   { "label": "city-1", "data1": 200, "data2": 60 },
   { "label": "city-2", "data1": 450, "data2": 40 },
   { "label": "city-3", "data1": 950, "data2": 78 },
]

const result = list.reduce((acc, item) => {

      const label = item['label'];
      acc[0].push(label);

      const keys = Object.keys(item).filter(key => key !== 'label');
      keys.forEach(key => {
        let labelItem = acc[1].find(value => value.label === key);
        if (!labelItem) {
          acc[1].push({ label:key, data: [item[key]] });
        } else {
          labelItem.data.push(item[key]);
        }
      });

      return acc;
    }, [[], []]);

console.log(result)

Для машинописного текста вам потребуется добавить тип.

...