user6728173 user6728173 - 3 months ago 14
AngularJS Question

How to iterate through a multidimensional JSON array?

My code is:

<div class="modal-body">
<p ng-repeat="maintGroup in maintGroups"> Some text in the modal and {{ maintGroup.serviceGroup.services[$index].description.custDescription }} </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>


maintGroup refers to the following JSON data:

[
{
"groupId":"MSG1",
"mileage":150000,
"serviceGroup":{
"description":"BRAKES",
"opCode":"BRK",
"serviceGroupId":"SG1",
"serviceType":"BRAKES",
"services":[
{
"description":{
"custDescription":"Replace right front brake motor",
"descriptionId":"D1"
},
"image":{
"imageId":"IMG1"
},
"serviceId":"S1"
}


I'm struggling to find a way to loop through the customer descriptions. I know the paths should be: maintGroup.serviceGroup.services[0].description.custDescription where 0 should be i. I just don't know how to get it to work. $index only works for index 0, but doesn't loop for the rest of ng-repeat.

Answer

I think you are going to want to nest another repeat inside your ng-repeat="maintGroup in maintGroups"

Try adding an element with ng-repeat='service in maintGroup.serviceGroup.services', and then somewhere inside of that you can call {{ service.description.customerDescription }}