Angular: draw a table from json map - angularjs

Question

I try to create a table like Full Tilt Payout Structure. I decided to create the next map:
$scope.payoutStructure = {
'2-4': {
1: 100,
2: 0,
3: 0,
4: 0,
5: 0,
6: 0,
},
'6-7': {
1: 65,
2: 35,
3: 0,
4: 0,
5: 0,
6: 0,
}
}
and so on...
But I can't figure out how to render it. If i'm not mistaken, at first I have to render headers like that:
<thead>
<tr>
<th><strong>Position \ Entries</strong></th>
<th ng-repeat="key in payoutStructure.keys()">{{key}}</th> //I'm not sure about .keys(), because they are not render in order as I know
</tr>
</thead>
But I can't get how to render tbody. It seems like I have to use an array instead of a map but I want to get value by keys like:
{{payoutStructure[entries]['1']}}

Answer 1

1) header you should render like
<tr>
<th ng-repeat="(key,value) in payoutStructure">{{key}}</th>
</tr>
2)
as for tbody - it it rendered by rows (not by columns), so your structure
should follow this structure.
It can be smth like this:
$scope.payoutStructure = ['2-4','6-7','8-9', '10-18', '18-45'];
$scope.payoutData = [
[100, 65, 50, 40, 38],
[0, 35,30,30,25]
]
<table class="table">
<tr>
<th ng-repeat="header in payoutStructure">{{header}}</th>
</tr>
<tr ng-repeat="row in payoutData">
<td ng-repeat="value in row track by $index" >{{value}} </td>
</tr>
</table>

Answer 2

Following will works for your data structure:
<table class="table">
<thead><tr>
<th>Finishing Position</th>
<th ng-repeat="(key, value) in payoutStructure">{{key}}</th>
</tr></thead>
<tbody>
<tr ng-repeat="key in payoutStructure['2-4']">
<th scope="row">{{$index +1}}</th>
<td>{{payoutStructure['2-4'][$index+1]}}</td>
<td>{{payoutStructure['6-7'][$index+1]}}</td>
</tr>
</tbody>
</table>
But better one if you change data structure as following:
(function(angular) {
'use strict';
angular.module('ngRepeat', [])
.controller('repeatController', function($scope) {
$scope.payouts = {
'2-4': [100],
'6-7': [65, 35],
'8-5': [50, 30, 20],
'10-18': [40, 30, 20, 10],
'18-45': [38, 25, 16, 10, 6, 5]
};
$scope.maxArray = [];
angular.forEach($scope.payouts, function(value, key) {
if (value.length > $scope.maxArray.length)
$scope.maxArray = value;
});
});
})(window.angular);
Here is $scope.maxArray where we write payout with max data array length. And now you can output it with ng-repeat:
<table class="table">
<thead><tr>
<th>Finishing Position</th>
<th ng-repeat="(key, value) in payouts">
{{key}}
</th>
</tr></thead>
<tbody>
<tr ng-repeat="key in maxArray track by $index">
<th scope="row">{{$index + 1}}</th>
<td ng-repeat="payout in payouts">
{{payout[$parent.$index]}}
</td>
</tr>
</tbody>
</table>
Result on plunker:
http://plnkr.co/edit/n5BfCtqjUKJ7LxvtxIFp?p=preview
And official API docs for ngRepeat directive:
https://docs.angularjs.org/api/ng/directive/ngRepeat