CODEWITHSUNDEEP
javascriptarraysjsonobject
Sathishkumar
Sathishkumar

Reputation: 419

how to Convert JSON data Object into Highcharts Series data?

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.

Upvotes: 1

Views: 313

Answers (2)

A1exandr Belan
A1exandr Belan

Reputation: 4780

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 }

Upvotes: 1

Nick
Nick

Reputation: 147146

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>

Upvotes: 1

Related Questions