Utilizing an ng-repeat to display the various sections of a form, I am facing an issue with displaying the questions within each section when using a nested ng-repeat. The values are not being displayed and I'm unsure why.
Below is a sample JSON structure that I am currently working with:
{
"section": [{
"name": "Section 1",
"questions": [{
"statement": "First question",
"id": 1
},
{
"statement": "Question 3",
"id": 3
},
{
"statement": "Question 4",
"id": 4
}],
"id": 1
},
{
"name": "Section 2",
"questions": [{
"statement": "Second question",
"id": 2
}],
"id": 2
}]
}
Here is a snippet of my view code:
<div class="panel panel-default" ng-repeat="section in questionsTest track by $index">
<div class="panel-heading">
<h1>{{ section.name }}</h1>
<h3 class="panel-title">{{ section.name }}. {{ section.id }}</h3>
</div>
<div class="panel-body" ng-repeat="question in section.questions track by $index">
{{ question.statement }} <!-- .statement -->
</div>
</div>
The variable 'questionsTest' holds the JSON data retrieved from the web service in the controller. This particular case uses a different JSON structure compared to other instances.