1

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.

3
  • Json Object - no, that's either JSON or a Javscript Object Commented Aug 29, 2022 at 6:03
  • How you get colour data? Commented Aug 29, 2022 at 6:29
  • color is not mandate, its optional only, Commented Aug 29, 2022 at 6:32

2 Answers 2

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>

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

9 Comments

Hi @Nick , the key values in some cases not same, its dynamic, its subject to change
@Sathishkumar are there fixed keys in each object that you will not process?
yes, actionName and actionId are fixed, maybe in future hand or head can be added instead of any other key
@Sathishkumar good to hear. I'm glad I could help
@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.
|
1

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 }

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.