i'm new to angular. I need to convert the data as nested array in angular13. A stackblitz example is appreciated
Data I got from the random API
"data": [
{
"Id": "17",
"Year": "2020",
"MonthName": "December",
"Details": "Start the process ",
"DisplayOrder": "3",
"LanguageID": "1",
"Hide": null
},
{
"Id": "16",
"Year": "2020",
"MonthName": "August",
"Details": "Conduct an online ",
"DisplayOrder": "2",
"LanguageID": "1",
"Hide": null
},
{
"Id": "15",
"Year": "2020",
"MonthName": "January",
"Details": "Complete a minimum wage ",
"DisplayOrder": "1",
"LanguageID": "1",
"Hide": null
},
{
"Id": "12",
"Year": "2019",
"MonthName": "September",
"Details": "Start professions",
"DisplayOrder": "3",
"LanguageID": "1",
"Hide": null
},
{
"Id": "11",
"Year": "2019",
"MonthName": "September",
"Details": "Formulate Family Model",
"DisplayOrder": "2",
"LanguageID": "1",
"Hide": null
},
{
"Id": "13",
"Year": "2019",
"MonthName": "October",
"Details": "Complete technical research",
"DisplayOrder": "1",
"LanguageID": "1",
"Hide": null
},
{
"Id": "14",
"Year": "2019",
"MonthName": "December",
"Details": "Complete technical research service",
"DisplayOrder": "1",
"LanguageID": "1",
"Hide": null
},
{
"Id": "10",
"Year": "2019",
"MonthName": "September",
"Details": "Formulate Occupation",
"DisplayOrder": "1",
"LanguageID": "1",
"Hide": null
},
{
"Id": "9",
"Year": "2018",
"MonthName": "October",
"Details": "Approved officially",
"DisplayOrder": "3",
"LanguageID": "1",
"Hide": null
},
{
"Id": "8",
"Year": "2018",
"MonthName": "October",
"Details": "Start technical research",
"DisplayOrder": "2",
"LanguageID": "1",
"Hide": null
},
{
"Id": "7",
"Year": "2018",
"MonthName": "October",
"Details": "Publish a number completed",
"DisplayOrder": "1",
"LanguageID": "1",
"Hide": null
},
{
"Id": "6",
"Year": "2017",
"MonthName": "October",
"Details": "Formulate Commission",
"DisplayOrder": "5",
"LanguageID": "1",
"Hide": null
},
{
"Id": "5",
"Year": "2017",
"MonthName": "May",
"Details": "Complete the formulation",
"DisplayOrder": "4",
"LanguageID": "1",
"Hide": null
},
{
"Id": "4",
"Year": "2017",
"MonthName": "April",
"Details": " Initiate relevant Act.",
"DisplayOrder": "3",
"LanguageID": "1",
"Hide": null
},
{
"Id": "3",
"Year": "2017",
"MonthName": "March",
"Details": "Started the process employees",
"DisplayOrder": "2",
"LanguageID": "1",
"Hide": null
},
{
"Id": "2",
"Year": "2017",
"MonthName": "February",
"Details": "Started the process allowances",
"DisplayOrder": "1",
"LanguageID": "1",
"Hide": null
},
{
"Id": "1",
"Year": "2016",
"MonthName": "October",
"Details": "Members appointed",
"DisplayOrder": "1",
"LanguageID": "1",
"Hide": null
}
],
But I need data like this. Is it possible in angular 13?
"data": [
{
"Year": "2020",
"Month": [
{
"Id": "17",
"MonthName": "December",
"Details": "Start the process",
"DisplayOrder": "3",
"LanguageID": "1",
"Hide": null
},
{
"Id": "16",
"MonthName": "August",
"Details": "Conduct an online",
"DisplayOrder": "2",
"LanguageID": "1",
"Hide": null
},
{
"Id": "15",
"MonthName": "January",
"Details": "Complete wage ",
"DisplayOrder": "1",
"LanguageID": "1",
"Hide": null
},
]
},
{
"Year": "2019",
"Month": [
{
"Id": "12",
"MonthName": "September",
"Details": "Start formulating",
"DisplayOrder": "3",
"LanguageID": "1",
"Hide": null
}
]
},
{
"Year": "2018",
"Month": [
{
"Id": "9",
"MonthName": "October",
"Details": "Approved officially",
"DisplayOrder": "3",
"LanguageID": "1",
"Hide": null
}
]
},
{
"Year": "2017",
"Month": [
{
"Id": "6",
"MonthName": "October",
"Details": "Formulate Commission",
"DisplayOrder": "5",
"LanguageID": "1",
"Hide": null
}
]
},
{
"Year": "2016",
"Month": [
{
"Id": "1",
"MonthName": "October",
"Details": "Members appointed",
"DisplayOrder": "1",
"LanguageID": "1",
"Hide": null
}
]
}
],
The above data is the expected array to loop in html to get the desired result.
This is a basic data ordering/parsing exercise, actually quite similar to a question I answered a few days ago.
As you iterate over it, you can group and map/reduce in order to output your own new structure.