如何将json数组映射到图表两个不同数组

Question

我在我的angular应用程序中使用chartjs图表。我已经使用了一个标准的web 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" }
           ];

这在angular rxjs映射中是可能的吗？

Answer 1

您可以使用reduce()将数据转换为所需的格式。

迭代给定的数据，如果存在具有当前标签的项，则将值附加到其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);

​

Answer 2

你可以在这里找到一个工作脚本：

​

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)

​

对于typescript，您需要添加类型。