Repeating nested JSON in angularjs with dot notation in HTML?

Question

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"
            }
        ]
}

New Dev · Accepted Answer · 2015-01-24 00:04:27Z

3

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>

answered Jan 24, 2015 at 0:04

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Michelangelo Over a year ago

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 :)

New Dev Over a year ago

What do you mean by "doesn't work"? Does it not display "Sardine" and "Funghi Trifolati"?

New Dev Over a year ago

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

Michelangelo Over a year ago

You get the credits for spotting the typo. Thanks a lot mate! I always post all my relevant code by the way.

Brian · Accepted Answer · 2015-05-29 15:06:29Z

1

This should work

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

Here is the fiddle

edited May 29, 2015 at 15:06

Brian

3,9694 gold badges24 silver badges39 bronze badges

answered Jan 24, 2015 at 0:19

Nikesh

1,3471 gold badge8 silver badges6 bronze badges

3 Comments

New Dev Over a year ago

How is this fundamentally different than my answer posted 15 minutes before?

Michelangelo Over a year ago

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.

Nikesh Over a year ago

typo hah. nice catch @NewDev, BTW, by the time I composed my answer you posted your code. I am new to stack over flow :)

Collectives™ on Stack Overflow

Repeating nested JSON in angularjs with dot notation in HTML?

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related