CODEWITHSUNDEEP
javascriptangularjsjson
gilesrpa
gilesrpa

Reputation: 1061

AngularJS nested ng-repeat in table

I am new to AngularJs and have come across an issue with Json data with nested arrays.

I have simplified the code to a simple html doc, this can be found below.

The first property {{HelloMessage}} is working and gets populated with the string value stored in the property HelloMessage, but the ng-repeat is not.

After looking online, I discovered that I in fact had an array within an array, so assumed that I needed to have an ng-repeat within an ng-repeat, but it is not working. I am quite sure that it is something simple that I have done wrong.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title>
</head>
<body>
    <h1 ng-controller="myController">{{helloMessage}}</h1>
<div>
    <table>
        <thead>
            <tr>
                <th>Id</th>
                <th>UserId</th>
                <th>DisplayName</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="stream in Data.Records">
                <tr ng-repeat="record in stream.Users">
                    <td>{{stream.Id}}</td>
                    <td>{{stream.User}}</td>
                    <td>
                        {{stream.Description}}
                    </td>
                    <!--<td>
                        <table>
                            <tbody>
                                <tr ng-repeat="b in value">
                                    <td>{{b.user}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>-->
                </tr>
            </tr>
        </tbody>
    </table>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<script type="text/javascript">
    angular.module('app', []).controller('myController',
                        function ($scope) {


                            $scope.helloMessage = "Hi";


                            $scope.Data = [{
                                Success: true,
                                ErrorMessage: null,
                                SuccessMessage: null,
                                Records: [{
                                    "CreatedBy": "Mickey Mouse",
                                    "CreatedDate": "2015-08-17T13:16:22.713",
                                    "CreatedDateDisplay": "17-08-2015",
                                    "Description": "Test 1",
                                    "Id": 7546798576985769857,
                                    "Name": "Test 1",
                                    "UpdatedBy": "",
                                    "UpdatedDate": null,
                                    "UpdatedDateDisplay": null,
                                    "User": null,
                                    "UserId": 0,
                                    "Users": [{
                                        "Users": [{
                                            "Id": 7546798576985769858,
                                            "UserId": 7546798576985769857,
                                            "DisplayName": "Daffy Duck"
                                        }, {
                                            "Id": 7546798576985769859,
                                            "UserId": 7546798576985769857,
                                            "DisplayName": "Pluto"
                                        }
                                        ],
                                        "User": "Bugs Bunny",
                                        "UserId": 7546798576985769857,
                                        "Name": "Test 2",
                                        "Description": "Test 2",
                                        "Id": 7546798576985769857,
                                        "CreatedBy": "Goofy",
                                        "CreatedDate": "2015-08-25T14:03:28.083",
                                        "UpdatedBy": "Porky Pig",
                                        "UpdatedDate": "2017-03-27T08:19:36.077",
                                        "CreatedDateDisplay": "25-08-2015",
                                        "UpdatedDateDisplay": "27-03-2017"
                                    }
                                    ]
                                }
                                ]
                            }
                            ];



                        });
</script>
</body>
</html>

No errors are throw in Chrome Console

Upvotes: 1

Views: 928

Answers (4)

Mistalis
Mistalis

Reputation: 18269

It seems that your JSON is full of arrays. It could probably be improved, but there is how you can display it in its current state. You don't need to nest ng-repeat:

<tbody>
    <tr ng-repeat="user in Data[0].Records[0].Users[0].Users">
        <td>{{user.Id}}</td>
        ...
</tbody>

Working JSFiddle of your code

Upvotes: 0

gilesrpa
gilesrpa

Reputation: 1061

Thank you, thank you all for your help. I have used Geethu Jose answer, but it still did not give me exactly what I was looking for, but after much head scratching I did come up with a solution for my problem. Instead of using the array placeholders [0] I needed access the arrays themselves at the different levels, so I had to change the code to the following. 

<div ng-app>
    <div ng-controller="myController">
        <h1>{{helloMessage}}</h1>
        <table>
            <tbody>
                <tr ng-repeat="data in Data">
                    <td>
                        <table ng-repeat="records in data">
                            <thead>
                                <tr>
                                    <th>UserId</th>
                                    <th>User</th>
                                    <th>Name</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>{{records.UserId}}</td>
                                    <td>{{records.User}}</td>
                                    <td>{{records.Name}}</td>
                                    <td>
                                        <table>
                                            <thead>
                                                <tr>
                                                    <th>Id</th>
                                                    <th>UserId</th>
                                                    <th>DisplayName</th>
                                                </tr>
                                            </thead>
                                            <tr ng-repeat="streamUser in records.Users">
                                                <td>{{streamUser.Id}}</td>
                                                <td>{{streamUser.UserId}}</td>
                                                <td>{{streamUser.DisplayName}}</td>
                                            </tr>
                                        </table>
                                    </td>

                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

Upvotes: 0

Mukesh Kumar
Mukesh Kumar

Reputation: 2376

First you have to define your controller to body level as following.

<body ng-controller="myController">

You have defined it as h1 level so it is not accessible.

I have made changes in your code please as following.

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title></title

</head>
<body ng-controller="myController">
    <h1>{{helloMessage}}</h1>
    <div>
        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>UserId</th>
                    <th>DisplayName</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
                    <td>{{stream.Id}}</td>
                    <td>{{stream.UserId}}</td>
                    <td>{{stream.DisplayName}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>    

    <script type="text/javascript">
angular.module('app', []).controller('myController',
                            function ($scope) {
                                $scope.helloMessage = "Hi";
                                $scope.Data = [{
                                    Success: true,
                                    ErrorMessage: null,
                                    SuccessMessage: null,
                                    Records: [{
                                        "CreatedBy": "Mickey Mouse",
                                        "CreatedDate": "2015-08-17T13:16:22.713",
                                        "CreatedDateDisplay": "17-08-2015",
                                        "Description": "Test 1",
                                        "Id": 7546798576985769857,
                                        "Name": "Test 1",
                                        "UpdatedBy": "",
                                        "UpdatedDate": null,
                                        "UpdatedDateDisplay": null,
                                        "User": null,
                                        "UserId": 0,
                                        "Users": [{
                                            "Users": [{
                                                "Id": 7546798576985769858,
                                                "UserId": 7546798576985769857,
                                                "DisplayName": "Daffy Duck"
                                            }, {
                                                "Id": 7546798576985769859,
                                                "UserId": 7546798576985769857,
                                                "DisplayName": "Pluto"
                                            }],
                                            "User": "Bugs Bunny",
                                            "UserId": 7546798576985769857,
                                            "Name": "Test 2",
                                            "Description": "Test 2",
                                            "Id": 7546798576985769857,
                                            "CreatedBy": "Goofy",
                                            "CreatedDate": "2015-08-25T14:03:28.083",
                                            "UpdatedBy": "Porky Pig",
                                            "UpdatedDate": "2017-03-27T08:19:36.077",
                                            "CreatedDateDisplay": "25-08-2015",
                                            "UpdatedDateDisplay": "27-03-2017"
                                        }]
                                    }]
                                }];
                            });
    </script>
</html>

Hope this will help you. thanks

Upvotes: 1

Geethu Jose
Geethu Jose

Reputation: 1993

Rewrite the ng-repeat as 

<tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
</tr>

Use 

    <td>{{stream.Id}}</td>
    <td>{{stream.UserId}}</td>
    <td>{{stream.DisplayName}}</td>

instead of 

<td>{{stream.Id}}</td>
<td>{{stream.User}}</td>
<td>{{stream.Description}}</td>


function myController($scope) {
  $scope.helloMessage = "Hi";
  $scope.Data = [{
    Success: true,
    ErrorMessage: null,
    SuccessMessage: null,
    Records: [{
      "CreatedBy": "Mickey Mouse",
      "CreatedDate": "2015-08-17T13:16:22.713",
      "CreatedDateDisplay": "17-08-2015",
      "Description": "Test 1",
      "Id": 7546798576985769857,
      "Name": "Test 1",
      "UpdatedBy": "",
      "UpdatedDate": null,
      "UpdatedDateDisplay": null,
      "User": null,
      "UserId": 0,
      "Users": [{
        "Users": [{
          "Id": 7546798576985769858,
          "UserId": 7546798576985769857,
          "DisplayName": "Daffy Duck"
        }, {
          "Id": 7546798576985769859,
          "UserId": 7546798576985769857,
          "DisplayName": "Pluto"
        }],
        "User": "Bugs Bunny",
        "UserId": 7546798576985769857,
        "Name": "Test 2",
        "Description": "Test 2",
        "Id": 7546798576985769857,
        "CreatedBy": "Goofy",
        "CreatedDate": "2015-08-25T14:03:28.083",
        "UpdatedBy": "Porky Pig",
        "UpdatedDate": "2017-03-27T08:19:36.077",
        "CreatedDateDisplay": "25-08-2015",
        "UpdatedDateDisplay": "27-03-2017"
      }]
    }]
  }];
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<div ng-app>
  <div ng-controller="myController">
    <h1>{{helloMessage}}</h1>
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>UserId</th>
          <th>DisplayName</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="stream in Data[0].Records[0].Users[0].Users">
          <td>{{stream.Id}}</td>
          <td>{{stream.UserId}}</td>
          <td>
            {{stream.DisplayName}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Upvotes: 1

Related Questions