current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

I am really having a hard time repeating nested objects that are loaded from a json file. I have seen examples of people using dot notations in their HTML for retrieving nested data in JSON, but I can't figure out how this would work for me. The JSON is valid, but I am new to Angular. Could somebody give me a push in the right direction? I would like to enter the name of my menu-card and display it in separate lists. This is what I have and it does not work, (the console does not give me any errors if you are wondering):

<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"
            }
        ]
}
share|improve this question

2 Answers 2

up vote 2 down vote accepted

Don't do ng-repeat on the same element that has ng-controller:

<div ng-controller="menu">
  <div ng-repeat="item in menu.voorgerecht">
    <div>{{item.naam}}</div>
  </div>
</div>
share|improve this answer
    
Thanks for the answer, but this does not work. I feel like I am missing something with the structure of my JSON file. It is really becoming a headache :) – Mikey Jan 24 at 0:12
    
What do you mean by "doesn't work"? Does it not display "Sardine" and "Funghi Trifolati"? – New Dev Jan 24 at 0:13
    
No it does not show anything. – Mikey Jan 24 at 0:16
    
Well, you also have an typo - it should be .success with two s. Otherwise, something else is going on that you haven't posted, since this works for me: plnkr.co/edit/Q4EyzU2zf7qhmB8JtOIU?p=preview – New Dev Jan 24 at 0:20
    
You get the credits for spotting the typo. Thanks a lot mate! I always post all my relevant code by the way. – Mikey Jan 24 at 0:28
up vote -1 down vote

This should work

<div ng-controller="menu">
   <div ng-repeat="item in menu.voorgerecht">
      {{ item.naam }}
   </div>
</div>

Here is the fiddle

share|improve this answer
    
How is this fundamentally different than my answer posted 15 minutes before? – New Dev Jan 24 at 0:20
    
I have tested this already in a fiddle with a variable. The problem is that when I am loading data from a JSON file I can't get it to work. – Mikey Jan 24 at 0:23
    
typo hah. nice catch @NewDev, BTW, by the time I composed my answer you posted your code. I am new to stack over flow :) – Nikesh Jan 24 at 0:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.