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.

1 Answer 1

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.

Sign up to request clarification or add additional context in comments.

3 Comments

Thank You Krenom. But Eliseo Answer Just Did the job For Me in this link stackoverflow.com/questions/74982436/…
Yep, that's the post I linked.
im not able to give vote my reputation is low. Thank you Krenom

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.