AngularJS ng-repeat nested object

Question

My code is outputting this:

{"name":"John"}
{"name":"Mark"}

How can it output this (without editing the $scope.names object):

John
Mark

Here's my view:

  <body ng-controller="MainCtrl">
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li>
        </ul>
  </body>

...and controller:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.names = {
        "1": {
            "name": "John"
        },
        "2": {
            "name": "Mark"
        }
    };
});

Here's my Plunker: http://plnkr.co/edit/hnjoPH0r9xhlvMzO93Ts?p=preview

tymeJV · Accepted Answer · 2015-07-08 18:33:51Z

3

Use {{name.name}} - you're currently just displaying the entire object being iterated over - you need to specify the property as well.

<li ng-repeat="name in names">
    {{name.name}}
</li>

answered Jul 8, 2015 at 18:33

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

Collectives™ on Stack Overflow

AngularJS ng-repeat nested object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related