Angular ng-repeat not iterating through json

Question

I am working on an app, and part of it is supposed to list the names of people from a javascript object. However, it does not seem to iterate through my json as I would expect, instead it returns the entire thing as if it was one object. Why does it do this?

Broken Plunker https://plnkr.co/edit/u9DHsTlaO0H2G2jqnzLa

Index.html

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
    <script src="app.js"></script>
  </head>
  <body>
    <people-list></people-list>
  </body>
</html>

app.js

var app = angular.module("plunker", []);
app.directive("peopleList", function() {
    return {
      restrict: "E",
      templateUrl: "people-list.html",
      controller: function() {
        this.people = peopleObject;
      },
      controllerAs: "people"
    };
  });

   var peopleObject = [
    { firstname: 'John',
          middlename: 'K',
          lastname: 'Doe',
          sex: "M"
    }, 
      {
        firstname: 'Jane',
          middlename: 'R',
          lastname: 'Doe',
          sex: "F"
    }, 
      {   
        firstname: 'Jacob',
          middlename: 'Harold',
          lastname: 'Smith',
          sex: "M"
      }
  ];

people-list.html

<ul class="list-group menuIcons">
    <li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people">
      {{person.firstname}}
    </li>
</ul>

Hadi · Accepted Answer · 2017-03-06 06:49:47Z

4

Try change to this. you define controllerAs in directive then you should use that in template

<ul class="list-group menuIcons">
  <li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in   people.people">
  {{person.firstname}}
 </li>
</ul>

answered Mar 6, 2017 at 6:49

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

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

3 Comments

Smit Over a year ago

Can I ask, why did the user use this. ? and when i tried removing it didnot even work. Why is that so?

Mr404servererror Over a year ago

That did it, thanks! I still don't understand where that extra 'people' came from though

Hadi Over a year ago

@Smit user used controllerAs syntax.

Manoj Patidar · Accepted Answer · 2017-03-06 06:54:26Z

0

people contain another object people, so you need to use person.person

like as below code

<ul class="list-group menuIcons">
    <li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people">
      {{person.firstname}}
    </li>
</ul>

Check working plnkr

answered Mar 6, 2017 at 6:54

Manoj Patidar

1,1712 gold badges11 silver badges29 bronze badges

Comments

Manikandan Velayutham · Accepted Answer · 2017-03-06 06:59:22Z

0

You missed out to put controllerAS alias in ng-repeat.

<ul class="list-group menuIcons">
    <li ng-click="tab.setTab(1);" class="list-group-item" ng-repeat="person in people.people">
      {{person.firstname}}
    </li>
</ul>

edited Mar 6, 2017 at 6:59

answered Mar 6, 2017 at 6:53

Manikandan Velayutham

2,2281 gold badge17 silver badges22 bronze badges

Collectives™ on Stack Overflow

Angular ng-repeat not iterating through json

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related