2

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.

James Z
  • 12,209
  • 10
  • 24
  • 44
Anton96
  • 23
  • 5

1 Answers1

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.

Krenom
  • 1,894
  • 1
  • 13
  • 20
  • Thank You Krenom. But Eliseo Answer Just Did the job For Me in this link https://stackoverflow.com/questions/74982436/converting-array-of-object-to-hierarchical-data-structure/74982556?noredirect=1#comment132323426_74982556 – Anton96 Jan 13 '23 at 06:03
  • Yep, that's the post I linked. – Krenom Jan 13 '23 at 07:52
  • 1
    im not able to give vote my reputation is low. Thank you Krenom – Anton96 Jan 13 '23 at 08:40