Using AngularJS with JSON objects in arrays nested within an array, how can I get the data into the html?

Question

I am trying to get the JSON data into list.html as follows, but my attempts are failing. I have tried following patterns described in other similar posts, but haven't had any luck and haven't found a scenario with JSON data formatted exactly like mine. How do I get the fields like givenName, familyName, primaryTitle, phones[0].value, and photo.small to show up?

index.html:

<!doctype html>
<html lang="en" ng-app="directoryApp">
<head>
  <meta charset="UTF-8">
  <title>Directory</title>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/angular/angular-route.min.js"></script>
  <script src="lib/angular/angular-animate.min.js"></script>

  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div ng-view></div>
</body>
</html>

list.html:

<ul ng-show="query">
    <li ng-animate="'animate'" ng-repeat="person in people.people | filter: query | orderBy: peopleOrder:direction">
        <img ng-src="images/{{person.photo.small}}" alt="Photo of {{person.name.givenName}}">
        <div class="info">
          <h2>{{person.name.givenName}}</h2>
          <h3>{{person.primaryTitle}}, {{person.phones[0].value}}</h3>
        </div>
    </li>
  </ul>

controllers.js:

var directoryControllers = angular.module('directoryControllers', ['ngAnimate']);

directoryControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
  $http.get('js/directoryData.json').success(function(data) {
    $scope.people = data;
    $scope.peopleOrder = 'familyName';
  });
}]);

app.js:

var directoryApp = angular.module('directoryApp', [
  'ngRoute',
  'directoryControllers'
]);

directoryApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.
  when('/list', {
    templateUrl: 'partials/list.html',
    controller: 'ListController'
  }).
  otherwise({
    redirectTo: '/list'
  });
}]);

directoryData.json:

[
    {
        "uid": 15, 
        "name": "School of Programming", 
        "sortKey": 0, 
        "type": "Academic", 
        "address": {
            "address1": "255 Foo St",
            "address2": "Suite 310",
            "city": "FooBar",
            "state": "FB",
            "postalCode": "90210"
        },
        "phones": [
            {
                "type": "Work", 
                "value": "555-1616"
            },

            {
                "type": "Fax", 
                "value": "555-3620"
            }
        ],
        "people": [
            {
                "uid": "person1", 
                "classification": "Faculty", 
                "name": {
                    "givenName": "Roo",
                    "nickname": "",
                    "additionalName": "",
                    "familyName": "Baf"
                },
                "primaryTitle": "Part Time Worker",
                "phones": [
                    {
                        "type": "Work", 
                        "value": "555-1616"
                    },

                    {
                        "type": "Mobile", 
                        "value": "555-1509"
                    }
                ],
                "photo": {
                    "small": "/__media__/photos/foo_portrait_small.jpg", 
                    "medium": "/__media__/photos/foo_portrait_medium.jpg", 
                    "large": "/__media__/photos/foo_portrait_large.jpg"
                }
            },

            {
                "uid": "person2", 
                "classification": "Faculty", 
                "name": {
                    "givenName": "Foo",
                    "nickname": "",
                    "additionalName": "P.",
                    "familyName": "Bar"
                },
                "primaryTitle": "Blah",
                "phones": [
                    {
                        "type": "Work", 
                        "value": "555-3608"
                    },

                    {
                        "type": "Home", 
                        "value": "555-4716"
                    }
                ],
                "photo": {
                    "small": "/__media__/photos/portrait_small.jpg", 
                    "medium": "/__media__/photos/portrait_medium.jpg", 
                    "large": "/__media__/photos/portrait_large.jpg" 
                }
            }
        ]
    },
    {
        "uid": 16, 
        "name": "School of Coding", 
        "sortKey": 1, 
        "type": "Academic", 
        "address": {
            "address1": "256 Foo St",
            "address2": "Suite 311",
            "city": "FooBar",
            "state": "FB",
            "postalCode": "90210"
        },
        "phones": [
            {
                "type": "Work", 
                "value": "555-1616"
            },

            {
                "type": "Fax", 
                "value": "555-3620"
            }
        ],
        "people": [
            {
                "uid": "person3", 
                "classification": "Faculty", 
                "name": {
                    "givenName": "Boo",
                    "nickname": "",
                    "additionalName": "",
                    "familyName": "Far"
                },
                "primaryTitle": "Part Time Worker",
                "phones": [
                    {
                        "type": "Work", 
                        "value": "555-1617"
                    },

                    {
                        "type": "Mobile", 
                        "value": "555-1508"
                    }
                ],
                "photo": {
                    "small": "/__media__/photos/fooz_portrait_small.jpg", 
                    "medium": "/__media__/photos/fooz_portrait_medium.jpg", 
                    "large": "/__media__/photos/fooz_portrait_large.jpg"
                }
            },

            {
                "uid": "person4", 
                "classification": "Faculty", 
                "name": {
                    "givenName": "Too",
                    "nickname": "",
                    "additionalName": "P.",
                    "familyName": "Mar"
                },
                "primaryTitle": "Blah",
                "phones": [
                    {
                        "type": "Work", 
                        "value": "555-3607"
                    },

                    {
                        "type": "Home", 
                        "value": "555-4717"
                    }
                ],
                "photo": {
                    "small": "/__media__/photos/Xportrait_small.jpg", 
                    "medium": "/__media__/photos/Xportrait_medium.jpg", 
                    "large": "/__media__/photos/Xportrait_large.jpg" 
                }
            }
        ]
    }
]

people.people which you are accessing in your ng-repeat is not defined, since ($scope).people is an array of objects. — muenchdo
– muenchdo, Commented Oct 1, 2015 at 14:01

charlietfl · Accepted Answer · 2015-10-01 14:09:06Z

1

You have an array of objects that each have a people property in them and that property value is an array.

Thus you need to use nested ng-repeat to first loop over the main array and within each iteration of that repeat, loop over the inner array

<ul ng-repeat="item in people"> 
   <li ng-animate="'animate'" ng-repeat="person in item.people | filter: ...">

answered Oct 1, 2015 at 14:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

Collectives™ on Stack Overflow

Using AngularJS with JSON objects in arrays nested within an array, how can I get the data into the html?

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