Home > Mobile >  How to convert custom JSON Object into Highcharts Series data?
How to convert custom JSON Object into Highcharts Series data?

Time:08-29

I have a custom JSON format from my API endings, I need to convert it to Highcharts series data format,

My Custom Json Format:

[{
        "personId": "7b9b19a8-0052-4036-9d27-721371a3a077",
        "pid": "PID-2",
        "averageCycleTime": 1.28,
        "idealCycleTime": 1.28,
        "cycleDetails": [{
                "cycleId": "fdc074a0-e839-4a93-bdca-93562788fd8d",
                "visionCycleId": "2",
                "cycleDuration": 12.5,
                "actionDetails": null
            },
            {
                "cycleId": "85d5b577-306f-4d69-9649-732ddfc7b228",
                "visionCycleId": "1",
                "cycleDuration": 12.5,
                "actionDetails": null
            }
        ]
    },
    {
        "personId": "f2a2d7b1-e099-4f78-8bfd-804158d21b09",
        "pid": "PID-1",
        "averageCycleTime": 1.28,
        "idealCycleTime": 1.28,
        "cycleDetails": [{
                "cycleId": "5860c566-cbf9-4d36-be1e-21e27402e8c1",
                "visionCycleId": "1",
                "cycleDuration": 12.5,
                "actionDetails": null
            },
            {
                "cycleId": "7acf1cab-7d55-412e-8381-102d5aad0a3a",
                "visionCycleId": "2",
                "cycleDuration": 12.5,
                "actionDetails": null
            }
        ]
    }
]

From the above JSON details on "cycleDetails" key values should be placed as below

series: [{
        name: 'Cycle-1',
        data: [{y:5, videoID : 'Video1'}, {y: 3, videoID : 'Video2'}],
    }, {
        name: 'Cycle-2',
        data: [{y:5, videoID : 'Video1'}, {y: 3, videoID : 'Video2'}]
    }]

** CycleDuration on Y and cycleId into VideoID.

CodePudding user response:

Try this:

const customJson = [
  {
    personId: '7b9b19a8-0052-4036-9d27-721371a3a077',
    pid: 'PID-2',
    averageCycleTime: 1.28,
    idealCycleTime: 1.28,
    cycleDetails: [
      {
        cycleId: 'fdc074a0-e839-4a93-bdca-93562788fd8d',
        visionCycleId: '2',
        cycleDuration: 12.5,
        actionDetails: null,
      },
      {
        cycleId: '85d5b577-306f-4d69-9649-732ddfc7b228',
        visionCycleId: '1',
        cycleDuration: 12.5,
        actionDetails: null,
      },
    ],
  },
  {
    personId: 'f2a2d7b1-e099-4f78-8bfd-804158d21b09',
    pid: 'PID-1',
    averageCycleTime: 1.28,
    idealCycleTime: 1.28,
    cycleDetails: [
      {
        cycleId: '5860c566-cbf9-4d36-be1e-21e27402e8c1',
        visionCycleId: '1',
        cycleDuration: 12.5,
        actionDetails: null,
      },
      {
        cycleId: '7acf1cab-7d55-412e-8381-102d5aad0a3a',
        visionCycleId: '2',
        cycleDuration: 12.5,
        actionDetails: null,
      },
    ],
  },
];

const series = customJson.map((value, key) => {
  return {
    name: `Cycle-${key   1}`,
    data: value.cycleDetails.map((v) => ({
      y: v.cycleDuration,
      videoId: v.cycleId,
    })),
  };
});
  • Related