table merge cells by angularjs or django templete language

Here is my expectation
I wrote a demo in codepen, although I figured out the rules, but I can’t do it with angularjs or django.
https://codepen.io/scheinin/pen/LaQpRV

enter image description here

Rendered data(Complete data in codepen
)

{"NFL": {},
"AFL": {
    "teams": [
        {
            "name": "New England Patriots",
            "area": "Foxborough",
            "position": [
                {
                    "name": "QB",
                    "player": [
                        {
                            "name": "Tom Brady",
                            "rings": "6"
                        }
                    ]
                },
                {
                    "name": "TE",
                    "player": [
                        {
                            "name": "Rob Gronkowski",
                            "rings": "3"
                        }
                    ]
                }
            ]
        }
    ]
}}

The table is one-dimensional, but the data is multidimensional.

Source: AngularJS