Looking to organize an object in the following format (with numbered questions):
1. Header 1
Subheader 1
1.1 Question 1
1.2 Question 2
Subheader 2
1.3 Question 1
1.4 Question 2
2. Header 2
Subheader 1
2.1 Question 1
Subheader 2
2.2 Question 2
I have managed to group it like above using underscore-js. However, I am struggling to maintain continuous numbering for the questions within each header. Please check out the jsfiddle link provided below for reference.
Attempted Solution: I can determine the number of questions but face difficulty in maintaining a continuous count due to $index resetting for every loop iteration.
HTML
<div ng-controller="MyCtrl">
<div ng-repeat="y in grid" ng-init="headerIndex = $index ;">{{headerIndex + 1 }}. {{headers[headerIndex]}}
<div ng-repeat="x in y" ng-init="subHeaderIndex = $index;"> {{x[0].sub_header_text}}
{{x.length}}
<div ng-repeat="z in x " ng-init="questionIndex = $index">
{{headerIndex + 1 }}.{{( (subHeaderIndex) * (x.length)) + (questionIndex + 1)}}
{{z.question_text}}
</div>
</div>
</div>
</div>
JS:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.grid = {"Header in English template of German Country":{"SubHeader in English template in German Country":[{"question_text":"sadsad","header_text":"Header in English template of German Country","sub_header_text":"SubHeader in English template in German Country","question_version":1,"question_id":151113,"position_id":101,"template_id":194941,"question_typ":"Text","mandatory_field":"false","status":"new","minimum_value":"null","maximum_value":"null"},{"question_text...
...Maximum_Value":"null"}]}};
$scope.headers = Object.keys($scope.grid);
}
For more details and code implementation, please visit the JSFiddle - http://jsfiddle.net/mdaamir1989/Lvc0u55v/10517/