格式化 Google 圖表的數組/對象數據

Question

在服務器上，我加載一個 JSON 文件並將其轉換為數組，然后將其返回給前端。 這個數據有很多層，需要將它的不同部分用於 Google Charts。

所以讓我們調用我的第一個圖表 chartOne。 我可以使用點表示法獲取此圖表所需的數據

console.log(this.chartData.chartOne)

這將輸出如下內容，它本質上是一個包含對象的數組。

(3) [{…}, {…}, {…}]
    0:
        Category: "cat1"
        Count: 11
    1: 
        Category: "cat2"
        Count: 14
    2: 
        Category: "cat3"
        Count: 21
    

我要做的是為條形圖准備這些數據。 Google 希望我的數據按以下格式提供

const chartData = [
    ["cat1", "cat2", "cat3"],
    [11, 14, 21]
]

所以第一行應該是 Category 的值，它下面的行包含它們的 Count。

我的問題是如何以這種格式准備數據？ 我正在嘗試一些東西，但它們似乎有些過分，而且我有點卡住了。 這是我目前所在的地方

Object.keys(this.chartData.chartOne).forEach(key => {
    const vmKeys = this.chartData.chartOne[key]
    Object.keys(vmKeys).forEach(key => {
        console.log(vmKeys + vmKeys[key])
    })
})

有沒有更好的方法來使用 map 或其他一些 ES6 特性來做到這一點？

謝謝

Answer 1

像這樣：

let chartOne = [
  {
    Category: "cat1",
    Count: 11,
  },
  {
    Category: "cat2",
    Count: 14,
  },
  {
    Category: "cat3",
    Count: 21,
  },
];

let out = [[], []];
for (let x of chartOne) {
  let [labels, values] = out;
  labels.push(x.Category);
  values.push(x.Count);
}

console.log(out);

// prints
=> [ [ 'cat1', 'cat2', 'cat3' ], [ 11, 14, 21 ] ]

Answer 2

 const chartData = { chartOne: [{ Category: "cat1", Count: 11 }, { Category: "cat2", Count: 14 }, { Category: "cat3", Count: 21 } ] } const newChartData = chartData.chartOne.reduce((acc, item) => { acc[0].push(item.Category); acc[1].push(item.Count); return acc; }, [[],[]]); console.log(newChartData);