I have this object:
const data = {
Jan: [{product: 'Shirt', num: '13'}, {product: 'Shoes', num: '15'}],
Feb: [{product: 'Shirt', num: '22'}, {product: 'Shoes', num: '1'}],
Mar: [{product: 'Shirt', num: '15'}, {product: 'Shoes', num: '25'}]
}
I need to create another object that looks like this:
const data = {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [
{
label: 'Shirt',
data: [13, 22, 15]
},
{
label: 'Shoes',
data: [15, 1, 25]
}
]
}
The object above is for a chartJs. The data array in the datasets array, correspont to each value for the product per month.
Thank you in advance
You can create the dataset using Array.prototype.reduce and create the new data array.
Note that you have to flatten the array as the Object.values(data) gives you an array of array.
const data = {
Jan: [{product: 'Shirt', num: '13'}, {product: 'Shoes', num: '15'}],
Feb: [{product: 'Shirt', num: '22'}, {product: 'Shoes', num: '1'}],
Mar: [{product: 'Shirt', num: '15'}, {product: 'Shoes', num: '25'}]
};
// Iterate through the data object's value and flatten this
// For example the Object.values(data) will provide you-
// [[{product: 'shirt', num: '13'}, {product: 'Shoes', num: '15'}], [{product: 'Shirt', num: '22'}, {product: 'Shoes', num: '1'}]] so on and so forth
// Need to make this a linear array using flat(1)
const dataset = Object.values(data).flat(1).reduce((acc, curr) => {
// Check if the product exists on the accumulator or not. If not then create a new
// object for the product.
// For example, this will create - {'Shirt': {label: 'Shirt', data: [13]}}
if (acc[curr.product] === undefined) {
acc[curr.product] = {
label: curr.product,
data: [Number(curr.num)]
}
} else {
// If the product already exists then push the num to the data array
acc[curr.product].data.push(Number(curr.num))
}
return acc;
}, {});
const newData = {
labels: Object.keys(data), // Set the keys as the labels
dataset: Object.values(dataset) // dataset is an object, just extract the values as an array
}
console.log(newData);.as-console-wrapper{ min-height: 100vh!important; top: 0;}