How to correctly loop / ng-repeat through nested objects/arrays?

Question

I am using angulars ng-repeat and anything I looked up or try doesn't work and I don't understand why. I am 'looping' through companies.users and want to display all the first names. Any help would be awesome! Thanks a lot!!

<div ng-app="app" ng-controller="appCtrl">
<div ng-repeat="user in companies.users">
<p>{{user.firstName}}</p>
<div>

app.controller('appCtrl', function($scope){
    $scope.companies = [{
        name: 'The Best Company Denim',
        users: [{
            firstName: 'Alex',
            lastName: 'D',
            number: 1234
        }, {
            firstName: 'Sarah',
            lastName: 't',
            number: 14
        }, {
            firstName: 'J',
            lastName: 'd',
            number: 07
        }]
    }, {
        name: 'The Best Company Elegant',
        users: [{
            firstName: 'Alx',
            lastName: 'B',
            number: 1234
        }, {
            firstName: 'Seth',
            lastName: 'w',
            number: 12
        }, {
            firstName: 'J.S',
            lastName: 'B',
            number: 7
        }]
    }, {
        name: 'The Best Company by Julia',
        users: [{
            firstName: 'Aleddddx',
            lastName: 'l',
            number: 1234
        }, {
            firstName: 'Maggy',
            lastName: 'n',
            number: 1
        }, {
            firstName: 'Ja',
            lastName: 'Key',
            number: 123
        }]
    }]
});

Do you have a controller setup? It's hard to tell if these pieces of code are separate or not. — sheriffderek
– sheriffderek, Commented May 16, 2017 at 1:08

Pengyy · Accepted Answer · 2017-05-16 01:19:07Z

you can use a nested ng-repeat to achieve this.

<div ng-repeat="company in companies">
  <div ng-repeat="user in company.users">
    <p>{{user.firstName}}</p>
  </div>
<div>

refer the below example:

angular.module("app", [])
  .controller("myCtrl", function($scope) {
    $scope.companies = [{
      name: 'The Best Company Denim',
      users: [{
        firstName: 'Alex',
        lastName: 'D',
        number: 1234
      }, {
        firstName: 'Sarah',
        lastName: 't',
        number: 14
      }, {
        firstName: 'J',
        lastName: 'd',
        number: 07
      }]
    }, {
      name: 'The Best Company Elegant',
      users: [{
        firstName: 'Alx',
        lastName: 'B',
        number: 1234
      }, {
        firstName: 'Seth',
        lastName: 'w',
        number: 12
      }, {
        firstName: 'J.S',
        lastName: 'B',
        number: 7
      }]
    }, {
      name: 'The Best Company by Julia',
      users: [{
        firstName: 'Aleddddx',
        lastName: 'l',
        number: 1234
      }, {
        firstName: 'Maggy',
        lastName: 'n',
        number: 1
      }, {
        firstName: 'Ja',
        lastName: 'Key',
        number: 123
      }]
    }];
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
  <div ng-repeat="company in companies">
    <div ng-repeat="user in company.users">
      <p>{{user.firstName}}</p>
    </div>
  </div>
</div>

Community · Accepted Answer · 2020-06-20 09:12:55Z

Like this: https://codepen.io/sheriffderek/pen/944e812b0cd218f2a7990fad8bcafc5d/ ?

Markup

<section ng-app="myApp" ng-controller="myCtrl">

    <ul class="company-list">
        <li class="company" ng-repeat="company in companies">
            {{company.name}}
            
            <ul class="person-list">
                <li class="person" ng-repeat="person in company.users">
                    {{person.firstName}}
                </li>
            </ul>
        </li>
    </ul>

</section>

Scripts

var companiesArray = [
    {
        name: 'The Best Company Denim',
        users: [
            {
                firstName: 'Alex',
                lastName: 'D',
                number: 1234
            }, {
                firstName: 'Sarah',
                lastName: 't',
                number: 14
            }, {
                firstName: 'J',
                lastName: 'd',
                number: 07
            }
        ],
    }, {
      ...
    },
];

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
    $scope.companies = companiesArray;
});

Collectives™ on Stack Overflow

How to correctly loop / ng-repeat through nested objects/arrays?

2 Answers 2

Comments

Markup

Scripts

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Markup

Scripts

Comments

Your Answer

Sign up or log in

Post as a guest

Related