Formatting Array/Object data for Google Charts

Question

on the server I load a JSON file and convert it to an array, then I return it back to the frontend. This data has a lot of layers, need to use different parts of it for Google Charts.

So lets call my first chart chartOne. I can obtain the data I need for this chart using dot notation

console.log(this.chartData.chartOne)

This will output something like the following, it is essentially an array holding objects.

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

What I am trying to do is prepare this data for a bar chart. Google expects my data to be provided in the following format

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

So the first row should be the values for the Category, and the row under this contains their Count.

My question is how do I prepare my data in this format? I am trying a few things but they seem excessive and I am getting a bit stuck. This is where I am currently at

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

Is there a better way of doing this using something like map or some other ES6 feature?

Thanks

secan · Accepted Answer · 2020-10-07 16:07:49Z

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);

answered Oct 7, 2020 at 16:07

secan

2,6771 gold badge9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sam R. · Accepted Answer · 2020-10-07 15:58:18Z

2

Like this:

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 ] ]

answered Oct 7, 2020 at 15:58

Sam R.

16.4k14 gold badges76 silver badges126 bronze badges

Collectives™ on Stack Overflow

Formatting Array/Object data for Google Charts

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related