How to convert data from an array to a nested array data in angular13

Question

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.

Answer 1

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.