How to drill down JSON with ng-repeat

Question

I have been stuck on displaying data with ng-repeat. the only thing I have been able to do is display the one of the two objects. Every Customer can have multiple Users. I am trying to display the Users in a table with there CustomerId. Working plunkr

app.controller('MainCtrl', function ($scope) {
var json = [
    {
        "CustomerId": "12xsd-344-fv23", "CompanyName": "ConocoPhillips",
        "Address": "1234 Main St", "City": "Redmond", "State": "WA", "Zip": "10999",
        "Email": "[email protected]",
        "Users": [
             {
                 "FirstName": "Rudy", "LastName": "Sanchez", "CustomerId": "12xsd-344-fv23", "Customer": null,
                 "Email": "[email protected]", "EmailConfirmed": true, "PasswordHash": "AGtuCXr",
                 "SecurityStamp": "b0fca140", "PhoneNumber": null, "PhoneNumberConfirmed": false, "TwoFactorEnabled": false,
                 "LockoutEndDateUtc": null, "LockoutEnabled": false, "AccessFailedCount": 0, "Roles": [], "Claims": [], "Logins": [],
                 "Id": "49b5", "UserName": "admin"
             },
             {
                 "FirstName": "Troy", "LastName": "Benbow", "CustomerId": "12xsd-344-fv23", "Customer": null,
                 "Email": "[email protected]", "EmailConfirmed": true, "PasswordHash": "AM8wL+iHaSG",
                 "SecurityStamp": "14f1483a-2e6f-41da-8307-a6c5945984a9", "PhoneNumber": null, "PhoneNumberConfirmed": false, "TwoFactorEnabled": false,
                 "LockoutEndDateUtc": null, "LockoutEnabled": true, "AccessFailedCount": 0, "Roles": [], "Claims": [], "Logins": [],
                 "Id": "9985b820-a45", "UserName": "tbenbow"
             }
        ]
    },
];
$scope.customers = json;

});

Answer 1

Since, CustomerId is also a property of User, you could make a list of Users in the controller and then loop them in the table:

  $scope.users = [];
  for(var i = 0; i < $scope.customers.length; i++) {
    for(var j = 0; j < $scope.customers[i].Users.length; j++) {

        //now you have access to customer properties with $scope.customers[i]
        var user = $scope.customers[i].Users[j];

        //example of adding CompanyName property
        user.CompanyName = $scope.customers[i].CompanyName;  

        //add user to $scope.users 
        $scope.users.push(user);
    }

  }

And then just ng-repeat the users:

<tr ng-repeat="user in users">
  <td>{{user.FirstName}} {{user.LastName}}</td>
  <td>{{user.UserName}}</td>
  <td>{{user.Email}}</td>
  <td>{{user.CustomerId}}</td>
  <td>{{user.CustomerName}}</td>
</tr>

Here is an updated plunker.

In fact, even if you need a property on the parent Customer part of json, you can add the property to the users array being repeated.

Preparing the data for view will often simplify template tricks (like having to build the table with extra ng-repeated elements. IMO, this is preferable.