Iterating with ng-repeat on nested JSON

How can I use ng-repeat if my JSON looks like

[
    {
        "id": "1",
        "shop_name": "Shop Name",
        "user_id": "2",
        "shop_email": "",
        "shop_address": "",
        "shop_phone": "",
        "company_name": "",
        "description": "",
        "shop_provision": null,
        "created_at": "2014-11-05 10:32:32",
        "updated_at": "2014-11-06 21:02:00",
        "banners": [
            {
                "id": "18",
                "disk_name": "545be1dfa2011452107756.png",
                "file_name": "Screenshot from 2014-11-06 09:50:48.png",
                "file_size": "135441",
                "content_type": "image/png",
                "title": null,
                "description": null,
                "field": "banners",
                "sort_order": "18",
                "created_at": "2014-11-06 21:02:23",
                "updated_at": "2014-11-06 21:02:34",
                "path": "/uploads/public/545/be1/dfa/545be1dfa2011452107756.png",
                "extension": "png"
            },
            {
                "id": "20",
                "disk_name": "545be1e6b5048131391528.png",
                "file_name": "Screenshot from 2014-11-06 09:50:48.png",
                "file_size": "135441",
                "content_type": "image/png",
                "title": null,
                "description": null,
                "field": "banners",
                "sort_order": "20",
                "created_at": "2014-11-06 21:02:30",
                "updated_at": "2014-11-06 21:02:34",
                "path": "/uploads/public/545/be1/e6b/545be1e6b5048131391528.png",
                "extension": "png"
            }
        ]
    }
]

      

on banners that I would like to repeat again

On the controller, I receive a JSON object or array that contains a subObject (responseJSON)

october.controllers['dashboard/wm'] = function ($scope, $request) {

     $scope.banners = $request('onGetBanners'); //the $request is an ajax function
     console.log($scope.banners);  
}

      

subObject

responseJSON looks like result in firebug console

Object { result="[{"id":"1","shop_name":"...","extension":"png"}]}]"}

      

out of all this i need the result =

than I am trying to iterate over the area like

<div ng-repeat="banner in banners.responseJSON.result track by $index"></div>

      

Update

I changed the way when I run the scope in the controller

october.controllers['publishers/wm'] = function ($scope, $request) {

    $request('onGetBanners', {success: function(data){
        this.success(data).done(function() {
              $scope.response = data.result;
            });
    }})     

}

      

than trying to iterate again

{% verbatim %}

{{response}} //outputs 
[
    {
        "id": "2",
        "shop_name": "Test Shop",
        "user_id": "1",
        "shop_email": null,
        "shop_address": null,
        "shop_phone": null,
        "company_name": null,
        "description": "",
        "shop_provision": null,
        "created_at": "2014-11-05 11:31:15",
        "updated_at": "2014-11-05 11:31:15",
        "banners": []
    }
]

<div ng-repeat="shop in response track by $index">
     {{ shop.shop_name }} //no data
</div>
{% endverbatim %}

      

If I delete track by $index

I get

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: shop in response, Duplicate key: string:", Duplicate value: "\""

      

Got this and I will never forget this pain.

angular.fromJson(jsondata)

      

+3


source to share


1 answer


Have you tried something like this?

Html



<div ng-repeat="shop in responseJson">
    {{shop.id}}
    <div ng-repeat="banner in shop.banners">
        <img ng-src="{{banner.path}}>
    </div>
</div>

      

See jsFiddle

+3


source







All Articles