I have a similar structure:
const items = [
{
hip: 40,
waist: 41,
neck: 42,
knee: 43,
arm: 44,
weight: 45,
},
{
hip: 46,
waist: 47,
neck: 48,
knee: 49,
arm: 50,
weight: 51,
}
];
To use it in Highcharts, I need to transform in a similar:
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
So, I wrote this:
const singleItem = props.items[0];
const keys = Object.keys(singleItem);
let singleSerie = [];
keys.map(key => {
let tempData = {
name: key,
data: []
};
const series = props.items.map(el => {
return el[key]
});
tempData.data = series
singleSerie.push(tempData)
return singleSerie;
})
It works, but it seems... "ugly". Is it possible to improve it?
You can simplify to
const keys = Object.keys(props.items[0]);
const singleSeries = keys.map(key => {
return {
name: key,
data: props.items.map(el => el[key]),
};
});
When already using map, don't use push. And you can just inline the series expression in the data object literal.
Also you might want to hardcode the keys, so that you don't get back no series if the items array is empty.
You can map the keys to their data points.
const items = [
{ hip: 40, waist: 41, neck: 42, knee: 43, arm: 44, weight: 45 },
{ hip: 46, waist: 47, neck: 48, knee: 49, arm: 50, weight: 51 }
];
const toSeries = (data) =>
Object.keys(data?.[0]).map((name) =>
({ name, data: data.map(obj => obj[name]) }));
const chart = Highcharts.chart('container', {
chart: { type: 'line' },
title: { text: 'Title' },
xAxis: { title: { text: 'X-Axis Label' } },
yAxis: { title: { text: 'Y-Axis Label' } },
series: toSeries(items)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/9.3.0/highcharts.min.js"></script>
<div id="container"></div>