Angular ng-repeat on JSON data array

Question

Hi I'm a bit new to angular and trying to figure out how I could access a json key and iterate and print the values that are contained in an array. In my case below I'm trying to print the names along with their roles.

angular.module('employeeEarnestApp')
  .controller('MainCtrl', function ($scope) {
    $scope.employees = [ { id: 1, name: 'Alex', roles: ['admin','user','CEO'] },
  { id: 2, name: 'John', roles: ['developer','marketing'] },
  { id: 3, name: 'Kim', roles: ['sales','developer','CTO'] } ];
  });

How could I use ng-repeat to print out the roles in the array? I'd imagine it might be something like this below?

 <div class="container">
    <h2>My Employees</h2>
    <p class="form-group" ng-repeat="employee in employees">
     {{employee.id}} - {{employee.name}}
    <p class="form-group" ng-repeat="roles in {{employees.roles}}">
     {{roles}}
   </p>
   </p>
 </div>

nvm, ng-repeat, which is a directive, automatically evaluates the expression. — Samir Alajmovic
– Samir Alajmovic, Commented Mar 11, 2015 at 21:21

Samir Alajmovic · Accepted Answer · 2015-03-11 21:36:49Z

4

Remove {{}} in ng-repeat, since ng-repeat automatically evaluates the expression, no need for {{}}.

 <div class="container">
    <h2>My Employees</h2>
    <p class="form-group" ng-repeat="employee in employees">
     {{employee.id}} - {{employee.name}}
    <p class="form-group" ng-repeat="role in employee.roles">
     {{role}}
   </p>
   </p>
 </div>

See, http://jsbin.com/hasuyewazi/1/edit

edited Mar 11, 2015 at 21:36

answered Mar 11, 2015 at 21:22

Samir Alajmovic

3,3033 gold badges29 silver badges28 bronze badges

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

3 Comments

ribsies Over a year ago

the second repeat should be ng-repeat='roles in employee.roles' - NOT employees.roles

user4033322 Over a year ago

Still not working for me - could there be something else I might be missing?

Samir Alajmovic Over a year ago

Missed " in employee.roles

Collectives™ on Stack Overflow

Angular ng-repeat on JSON data array

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related