iteration with ng-repeat on nested JSON - json

Question

How do 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 I would like iterate again
On controller I get a JSON object or array which 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);
}
the subObject
responseJSON looks like as the result in firebug console
Object { result="[{"id":"1","shop_name":"...","extension":"png"}]}]"}
from all this I want the result=
than I try to iterate the scope like
<div ng-repeat="banner in banners.responseJSON.result track by $index"></div>
Update
I changed the way as I initiate the scope in controller
october.controllers['publishers/wm'] = function ($scope, $request) {
$request('onGetBanners', {success: function(data){
this.success(data).done(function() {
$scope.response = data.result;
});
}})
}
than again trying iterate
{% 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 remove 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 it and I never gonna forget this pain
angular.fromJson(jsondata)

Answer 1

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 on jsFiddle