AngularJS [SOLVED]: How to correctly loop / ng-repeat through nested objects/arrays?

AngularJS [SOLVED]: How to correctly loop / ng-repeat through nested objects/arrays?

Home Forums Frameworks AngularJS tutorials AngularJS [SOLVED]: How to correctly loop / ng-repeat through nested objects/arrays?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #111521

    Cloudy Point
    Keymaster

    QuestionQuestion

    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
            }]
        }]
    });
    

    #111522

    Cloudy Point
    Keymaster

    Accepted AnswerAnswer

    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>

    Source: https://stackoverflow.com/questions/43990923/how-to-correctly-loop-ng-repeat-through-nested-objects-arrays
    Author: Pengyy
    Creative Commons License
    This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.