Struggling with implementing nested ng-repeats in my code. I have a JSON object with multiple layers and attempting to iterate through them to display the data. Here is the structure of the JSON:
{
"status": "success",
"data": {
"Mat": {
"total": 0,
"pending_devices": 0,
"individual_counts": {
"Mat1": {
"total": 0,
"pending_devices": 0,
"locations": []
},
"Mat2": {
"total": 0,
"pending_devices": 0,
"locations": [
{
"location1": 5
},
{
"location2": 2
}
]
}
}
},
"Cable": {
"total": 0,
"pending_devices": 0,
"individual_counts": {
"Flat Cable": {
"total": 0,
"pending_devices": 0,
"locations": []
},
"L Cable": {
"total": 0,
"pending_devices": 0,
"locations": [
{
"location1": 5
},
{
"location2": 2
}
]
}
}
}
}
}
This is the looping code I am trying to use:
<md-grid-tile ng-repeat="(key, value) in vm.counts" class="{{vm.colors[$index]}}" md-rowspan="2">
<md-grid-tile-body>
<h2>Total:{{value.total}}</h2>
<h2>Pending:{{value.pending_devices}}</h2>
<p ng-repeat="(productType, productCounts) in value.individual_counts">
<h3>{{productType}}:</h3>
<h4>Total:{{productCounts.total}}</h4>
<h4>Pending:{{productCounts.pending_devices}}</h4>
<h4>Locations:</h4>
<div ng-repeat="(location, locationCount) in productCounts.locations">
<h5>{{location}}:{{locationCount}}</h5>
</div>
</p>
</md-grid-tile-body>
<md-grid-tile-footer>
<h3>{{key}}</h3>
</md-grid-tile-footer>
</md-grid-tile>
I can successfully loop through the top level but facing issues with the productType/ProductTypeCount loop and beyond. I confirmed that value.individual_counts contains the correct data. Any help would be greatly appreciated.