I'm learning how to use ChartJs and I've hit a wall. I need to figure out how to transform JSON to labels and data for a bar chart.
The JSON is a products array of orders. There could be any number of products, so I need to filter through and build up a products list for the ChartJS labels. I then need to count how many times the product appears in the JSON to determine how many of those products were sold.
[
{
"order_id": 1,
"product_name": "apple"
},
{
"order_id": 2,
"product_name": "orange"
},
{
"order_id": 3,
"product_name": "orange"
},
{
"order_id": 4,
"product_name": "monster truck"
},
{
"order_id": 5,
"product_name": "spark plug"
},
{
"order_id": 6,
"product_name": "apple"
},
{
"order_id": 7,
"product_name": "can of peaches"
},
{
"order_id": 8,
"product_name": "monster truck"
},
{
"order_id": 9,
"product_name": "orange"
},
{
"order_id": 10,
"product_name": "orange"
}
]
I am hoping to create two arrays for the products labels and product orders
Labels: ["apple", "orange", "monster truck", "spark plug", "can of peaches"]
Orders: [2, 4, 2, 1, 1]
How can I do this?
You could try also this solution(a bit shorter):
//@ts-nocheck
const products = [
{
order_id: 1,
product_name: "apple",
},
{
order_id: 2,
product_name: "orange",
},
{
order_id: 3,
product_name: "orange",
},
{
order_id: 4,
product_name: "monster truck",
},
{
order_id: 5,
product_name: "spark plug",
},
{
order_id: 6,
product_name: "apple",
},
{
order_id: 7,
product_name: "can of peaches",
},
{
order_id: 8,
product_name: "monster truck",
},
{
order_id: 9,
product_name: "orange",
},
{
order_id: 10,
product_name: "orange",
},
];
const map = {};
products.forEach(
(product) =>
(map[product.product_name] = (map[product.product_name] ?? 0) + 1)
);
const Labels = Object.keys(map);
const Orders = Object.values(map);
console.log({ Labels, Orders });
const array = [
{
"order_id": 1,
"product_name": "apple"
},
{
"order_id": 2,
"product_name": "orange"
},
{
"order_id": 3,
"product_name": "orange"
},
{
"order_id": 4,
"product_name": "monster truck"
},
{
"order_id": 5,
"product_name": "spark plug"
},
{
"order_id": 6,
"product_name": "apple"
},
{
"order_id": 7,
"product_name": "can of peaches"
},
{
"order_id": 8,
"product_name": "monster truck"
},
{
"order_id": 9,
"product_name": "orange"
},
{
"order_id": 10,
"product_name": "orange"
}
];
const labels = [...new Set(array.map(value => value.product_name))];
const orders = labels.map(value => {
return array.reduce((previousValue, currentValue) => {
console.log(currentValue);
if (currentValue.product_name === value) {
return previousValue + 1;
}
else {
return previousValue;
}
}, 0);
});
Read about these array methods here:
The Set is used to only get an array of the unique values: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set
But because the Set object doesn't have these methods we transform it back to an Array using the spread operator (...)