How to dynamically generate a HTML table from a nested JSON object using the AngularJS ngRepeat directive?

advertisements

I have to create a table as follows from a nested object.

JSON object :

{
    "A":{
        "1":"X",
        "2":"Y",
        "3":"Z"
    },
    "B":{
        "1":"P",
        "2":"Q",
        "3":"R"
    }
}

Desired Table :

A: X|Y|Z
B: P|Q|R

HTML code :

    <!DOCTYPE html>
<html data-ng-app="myApp">
<body>

    <div ng-controller="GreetingController" >
        <div ng-repeat='(key,val) in arr'>{{temp(val)}}
            <div ng-repeat='(nestedKey,nestedVal) in aux'>
                {{nestedVal}}
            </div>
        </div>
    </div>
</body>

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
    var myApp = angular.module('myApp',[]);
    myApp.controller('GreetingController', ['$scope', function($scope) {
        $scope.arr={"A":{"1":"X","2":"Y","3",},"B":{"1":"P","2":"Q"}};
        $scope.temp = function(val)
        {
            console.log(val);
            $scope.aux = val;
        }
    }]);
</script>

I am unable to understand how and where to place the <table>,<tr> and <td> tags to be able to generate the table as describe.


EDIT:

tr is row and td is table cell

<html data-ng-app="myApp">
<body>
    <div ng-controller="GreetingController" >
        <table>
            <tr ng-repeat='(key,val) in arr'>
                <td>
                    {{key}}
                </td>
                <td ng-repeat='(nestedKey,nestedVal) in val'>
                    {{nestedVal}}
                </td>
            </tr>
        </table>
    </div>
</body>