When making an API call from Angular 5, the response is returned in the following format.
{ "metadata":{
"lastSyncTime":"2000-11-21T16:07:53",
"dataFromDB":true
},
"allocationReports":[ {
"allocatedUserCount":100,
"healthGoalName":"Eat Healthier"
},
{
"allocatedUserCount":130,
"healthGoalName":"Feel Happier"
},
{
"allocatedUserCount":150,
"healthGoalName":"Quit Smoking"
}
],
"overall":{
"usersWithGoalCount":0,
"registeredCount":500,
"eligibleCount":280
}
}
In order to plot multiple donut charts using this data, it needs to be transformed into a list of lists (or Array of Arrays). Various methods have been attempted such as utilizing .map, however all values are being retrieved in a single list. How can the data be structured in the desired format below.
The required format is :
[
[
{ "x": "Eat Healthier", "y": 100 },
{ "x": "Total registered", "y": 500 }
],
[
{ "x": "Feel Happier", "y": 130 },
{ "x": "Total registered", "y": 500 }
],
[
{ "x": "Quit Smoking", "y": 150 },
{ "x": "Total registered", "y": 500 }
]
]
The total registered value will be sourced from overall.registeredCount