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