I have some JSON Data object and its needs to convert into Highcharts Series data, I tried lot with my minimal knowledge in JS, but i can't,
Json Object :
[
{
"actionId": "fd799109-7cfd-489b-acce-28e2b538258e",
"actionName": "Stand",
"withInteraction": 1.4,
"withoutInteraction": 1.2,
"knee": 2.4,
"arm": 2.3,
"trunk": 0,
"leg": 0,
"neck": 2
},
{
"actionId": "a64eee9f-3b71-4335-a4cd-b62cf1e4e270",
"actionName": "Walk",
"withInteraction": 1.4,
"withoutInteraction": 1.2,
"knee": 2.4,
"arm": 2.3,
"trunk": 0,
"leg": null,
"neck": null
},
{
"actionId": "9ca31804-0084-4bd5-8bfc-32f8a99c1c22",
"actionName": "Bend",
"withInteraction": 2.4,
"withoutInteraction": 2.7,
"knee": 2.4,
"arm": 2.3,
"trunk": 0,
"leg": 0,
"neck": 2
},
{
"actionId": "08f4d687-436b-4faa-9d4f-0c4fe77f7ac7",
"actionName": "Move",
"withInteraction": 1.4,
"withoutInteraction": 1.2,
"knee": 2.4,
"arm": 2.3,
"trunk": 0,
"leg": 0,
"neck": 2
}
]
The above data needs to be converted to be like below
series: [
{
name: 'knee',
data: [2.4, 2.4, 2.4, 2.4],
color : '#78e08f'
}, {
name: 'leg',
data: [0,null,0,0],
color : '#c23616'
},
{...}
]
Please help me out to fix this , Thanks in Advance.
If you create arrays of the data series names (by getting all the keys from the first object which are data values) and the colours that you want to assign to those series, you can then iterate the keys and filter the required data out of the returned json data (which I have assumed you have parsed to a JavaScript object):
const keys = Object.keys(jsondata[0]).filter(k => !["actionId", "actionName"].includes(k))
const colours = keys.map((_) => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`)
const result = {
series: keys.map((key, i) => ({
name: key,
data: jsondata.map(o => o[key]),
color: colours[i]
}))
}
console.log(result)<script type="text/javascript">
const jsondata = [{
"actionId": "fd799109-7cfd-489b-acce-28e2b538258e",
"actionName": "Stand",
"withInteraction": 1.4,
"withoutInteraction": 1.2,
"knee": 2.4,
"arm": 2.3,
"trunk": 0,
"leg": 0,
"neck": 2
},
{
"actionId": "a64eee9f-3b71-4335-a4cd-b62cf1e4e270",
"actionName": "Walk",
"withInteraction": 1.4,
"withoutInteraction": 1.2,
"knee": 2.4,
"arm": 2.3,
"trunk": 0,
"leg": null,
"neck": null
},
{
"actionId": "9ca31804-0084-4bd5-8bfc-32f8a99c1c22",
"actionName": "Bend",
"withInteraction": 2.4,
"withoutInteraction": 2.7,
"knee": 2.4,
"arm": 2.3,
"trunk": 0,
"leg": 0,
"neck": 2
},
{
"actionId": "08f4d687-436b-4faa-9d4f-0c4fe77f7ac7",
"actionName": "Move",
"withInteraction": 1.4,
"withoutInteraction": 1.2,
"knee": 2.4,
"arm": 2.3,
"trunk": 0,
"leg": 0,
"neck": 2
}
]
</script>You can use hash grouping approach, with logical nullish assignment (??=)
const data = [{"actionId":"fd799109-7cfd-489b-acce-28e2b538258e","actionName":"Stand","withInteraction":1.4,"withoutInteraction":1.2,"knee":2.4,"arm":2.3,"trunk":0,"leg":0,"neck":2},{"actionId":"a64eee9f-3b71-4335-a4cd-b62cf1e4e270","actionName":"Walk","withInteraction":1.4,"withoutInteraction":1.2,"knee":2.4,"arm":2.3,"trunk":0,"leg":null,"neck":null},{"actionId":"9ca31804-0084-4bd5-8bfc-32f8a99c1c22","actionName":"Bend","withInteraction":2.4,"withoutInteraction":2.7,"knee":2.4,"arm":2.3,"trunk":0,"leg":0,"neck":2},{"actionId":"08f4d687-436b-4faa-9d4f-0c4fe77f7ac7","actionName":"Move","withInteraction":1.4,"withoutInteraction":1.2,"knee":2.4,"arm":2.3,"trunk":0,"leg":0,"neck":2}];
const reservedlKeys = ["actionId","actionName"];
const getColor = (key) => '#000000';
const groups = data.reduce((acc, item) => {
Object.entries(item).forEach(([key, value]) => {
if (!reservedlKeys.includes(key)) {
acc[key] ??= { name: key, data: [], color: getColor(key) };
acc[key].data.push(value);
}
});
return acc;
}, {});
const series = Object.values(groups);
console.log(series).as-console-wrapper { max-height: 100% !important; top: 0 }