I'm struggling with displaying nested objects loaded from a JSON file in Angular. I've seen examples of using dot notations in HTML to access nested data, but I'm new to Angular and can't seem to get it right. The JSON is valid, but I just need some guidance on how to properly display the menu-card names in separate lists. Here's what I have so far (no errors in the console):
<div ng-controller="menu" ng-repeat="item in menu.voorgerecht">
<div>{{item.naam}}</div>
</div>
js
angular.module("app", [])
.controller("menu", function ($scope, $http) {
$scope.menu = null;
$http({
method: 'GET',
url: 'menu-items.json'
}).succes(function (data, status, headers, config) {
$scope.menu = data;
}).error(function (data, status, headers, config) {});
});
json
{
"voorgerecht": [
{
"naam": "Sardine"
},
{
"naam": "Funghi Trifolati"
}
],
"pizza": [
{
"naam": "San Marco"
},
{
"naam": "Capriciosa"
}
],
"desert": [
{
"naam": "Sorbet"
},
{
"naam": "Dame Blanche"
}
]
}