how to Convert JSON data Object into Highcharts Series data?

Question

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.

Json Object - no, that's either JSON or a Javscript Object — Jaromanda X
– Jaromanda X, Commented Aug 29, 2022 at 6:03

Nick · Accepted Answer · 2022-08-29 06:48:00Z

1

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>

edited Aug 29, 2022 at 6:48

answered Aug 29, 2022 at 6:23

Nick

147k23 gold badges67 silver badges106 bronze badges

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

9 Comments

Sathishkumar Over a year ago

Hi @Nick , the key values in some cases not same, its dynamic, its subject to change

Nick Over a year ago

@Sathishkumar are there fixed keys in each object that you will not process?

Sathishkumar Over a year ago

yes, actionName and actionId are fixed, maybe in future hand or head can be added instead of any other key

Nick Over a year ago

@Sathishkumar good to hear. I'm glad I could help

Nick Over a year ago

@Sathishkumar I'm not sure exactly what you mean? It might be easier to ask a new question; you can refer back to this one if needed for context.

|

A1exandr Belan · Accepted Answer · 2022-08-29 06:57:20Z

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 }

Collectives™ on Stack Overflow

how to Convert JSON data Object into Highcharts Series data?

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related