Monzingo Monzingo - 2 months ago 10
JSON Question

Why isnt my nested ng-repeat working

Im not quite sure what is going on with my ng-repeat, but this is what i have.

<div ng-controller="DeliveryController">
<div ng-repeat="stop in Deliveries">
<div >
{{stop.stopId}}
</div>
<div ng-repeat="box in stop.Boxes">
<div>
{{box.orderNum}}
</div>
</div>
</div>
</div>


The only thing that is being returned is the first stop.stopId. Im not quite sure if my json is off or what is going on. Any ideas would be greatly appreciated.

Here is what is being returned from my api call.

[
{
"stopsInfo": {
"boxes": [
{
"boxID": 1,
"orderNum": "1",
"boxNum": "03600029145",
"sts": "ORD",
"lat": 41.33465,
"lng": -40.5703457,
"eventDt": "2016-09-20T00:39:05.323",
"stopId": 1
},
{
"boxID": 9,
"orderNum": "2",
"boxNum": "12345678901",
"sts": "ORD",
"lat": 41.33465,
"lng": -40.5703457,
"eventDt": "2016-09-20T00:39:07.85",
"stopId": 1
},
{
"boxID": 10,
"orderNum": "3",
"boxNum": "01600066060",
"sts": "ORD",
"lat": 41.33465,
"lng": -40.5703457,
"eventDt": "2016-09-20T00:39:09.607",
"stopId": 1
}
],
"stopId": 1,
"contactName": "Justin",
"companyName": "Ignite LLC",
"addr1": "123 Main",
"addr2": "Suite 100",
"city": "Katy",
"state": "TX",
"zip": "77449"
},
"signeeId": 1,
"signee": "Justin",
"signature": "asdasds",
"stopId": 1
},
{
"stopsInfo": {
"boxes": [
{
"boxID": 12,
"orderNum": "4",
"boxNum": "12345678910",
"sts": "ORD",
"lat": 43.38928,
"lng": -40.2342344,
"eventDt": "2016-09-19T18:29:28.077",
"stopId": 5
},
{
"boxID": 14,
"orderNum": "5",
"boxNum": "123456",
"sts": "ORD",
"lat": 43.38928,
"lng": -40.2342344,
"eventDt": "2016-09-16T16:03:10.777",
"stopId": 5
}
],
"stopId": 5,
"contactName": "Paul",
"companyName": "Ceremity",
"addr1": "456 Moutain View",
"addr2": "Suite 200",
"city": "Katy",
"state": "TX",
"zip": "77449"
},
"signeeId": 8,
"signee": "Paul",
"signature": "asdasdsadsa",
"stopId": 5
},
{
"stopsInfo": {
"boxes": [
{
"boxID": 15,
"orderNum": "6",
"boxNum": "63938200039",
"sts": "ORD",
"lat": 45.32312,
"lng": -43.2345324,
"eventDt": "2016-09-14T00:00:00",
"stopId": 6
}
],
"stopId": 6,
"contactName": "Vlad",
"companyName": "Starbucks",
"addr1": "789 Riveroak",
"addr2": "Suite 300",
"city": "Katy",
"state": "TX",
"zip": "77449"
},
"signeeId": 9,
"signee": "Vlad",
"signature": "asdasdasdasd",
"stopId": 6
}
]

Answer

The boxes array is inside stopsInfo object. Change the loop to:

<div ng-controller ="DeliveryController" >

    <div ng-repeat="stop in Deliveries">
        <div >
            {{stop.stopId}}
        </div>
        <div ng-repeat="box in stop.stopsInfo.boxes">
            <div>
                {{box.orderNum}}
            </div>
        </div>
    </div>
</div>

Plunker Sample here