ng-repeat nested array in html tables

Question

I know there are a lot of questions out there regarding this subject. I am just super confused. I did my research and tried a bunch of solutions from different people. I'm just not getting my head wrapped around this. Please help out.

I have an incoming array which looks like this.

As you can see object with index 4 has documents array 2.

I basically would like to preset this ( the documents) in my table (under the documents column) one next to the other separated by comma (not necessarily comma though as long as it has a clear view to the user).

The table looks like this.

        <div class="table-responsive">
        <table class="table table-bordered" >
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Documents</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr dir-paginate="item in allItems | orderBy:sortKey:reverse | filter: search.query | itemsPerPage : itemPerPage" total-items="totalItems" current-page="currentPage">

                    <td>{{item.name}}</td>
                    <td>{{item.description}}</td>
                    <td>{{item.documents.name}}</td> // this obviously will not work 
                    <td style="width:150px">
                        <button class="btn btn-info btn-sm" ng-click="showEditDialog($event, item)">
                            <i class="glyphicon glyphicon-edit"></i>
                        </button>
                        <button class="btn btn-danger btn-sm" ng-click="deleteResource(item, $index)">
                            <i class="glyphicon glyphicon-trash"></i>
                        </button>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="20" class="text-center">
                        <div ng-hide="allItems.length">
                            There are no data available
                        </div>
                        <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" boundary-links="true"></dir-pagination-controls>
                        <md-progress-circular md-mode="indeterminate" ng-if="AjaxInProgress"></md-progress-circular>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>

I have tried solutions from

nested table using ng-repeat

Accessing the nested Arrays using ng-repeat in angularjs

and many other solutions online but still can't get this to work proberly.

score 1 · Accepted Answer · answered Dec 21 '16 at 09:56

You should try something like this :

<div class="table-responsive">
    <table class="table table-bordered" >
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Documents</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr dir-paginate="item in allItems | orderBy:sortKey:reverse | filter: search.query | itemsPerPage : itemPerPage" total-items="totalItems" current-page="currentPage">

                <td>{{item.name}}</td>
                <td>{{item.description}}</td>
                <td>
                    <span ng-repeat="document in item.documents">
                        {{document.name}}<span ng-if="!$last">,</span>
                    <span>
                </td> // this obviously will not work 
                <td style="width:150px">
                    <button class="btn btn-info btn-sm" ng-click="showEditDialog($event, item)">
                        <i class="glyphicon glyphicon-edit"></i>
                    </button>
                    <button class="btn btn-danger btn-sm" ng-click="deleteResource(item, $index)">
                        <i class="glyphicon glyphicon-trash"></i>
                    </button>
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="20" class="text-center">
                    <div ng-hide="allItems.length">
                        There are no data available
                    </div>
                    <dir-pagination-controls on-page-change="pageChanged(newPageNumber)" boundary-links="true"></dir-pagination-controls>
                    <md-progress-circular md-mode="indeterminate" ng-if="AjaxInProgress"></md-progress-circular>
                </td>
            </tr>
        </tfoot>
    </table>
</div>

So sweet and simplistic solution. Thanks! – user3641381 Dec 21 '16 at 10:01 — user3641381, Dec 21 '16 at 10:01

score 0 · Answer 2 · answered Dec 21 '16 at 10:00

Nested ng-repeat can be implemented like this:

HTML:

<input type="text" ng-model="search">
<ul ng-repeat="oneauth in authorisations">
   <li>{{oneauth.name}}</li>
   <b>Nested ng-repeat</b>
    <li ng-repeat="entry in oneauth.authorisations | nameFilter:search">{{entry.auth.name}}</li>
</ul>

JAVASCRIPT:

var app = angular.module('myapp', [], function () {});

app.controller('AppController', function ($scope) {    
    $scope.authorisations = [{
      name:"one",
        "authorisations":[
        {
            "auth":{
                "number":"453",
                "name":"Apple Inc."
            }
        },
        {
            "auth":{
                "number":"123",
                "name":"Microsoft Inc."
             }
        }]
    },{
      name:"two",
        "authorisations":[
        {
            "auth":{
                "number":"453",
                "name":"Nokia Inc."
            }
        },
        {
            "auth":{
                "number":"123",
                "name":"Samsung Inc."
             }
        }]
    }];
});

app.filter('nameFilter', function(){
    return function(objects, criteria){
        var filterResult = new Array();
        if(!criteria)
            return objects;

        for(index in objects) {
            if(objects[index].auth.name.indexOf(criteria) != -1) // filter by name only
                filterResult.push(objects[index]);
        }
        console.log(filterResult);
        return filterResult;  
    }    
});

Working example

score 0 · Answer 3 · answered Dec 21 '16 at 10:07

Try this,

Replace this

      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
      <td>{{item.documents.name}}</td>

With

      <td>{{item.name}}</td>
      <td>{{item.description}}</td>
      <td><span ng-repeat='document in item.documents'>{{document .name}},<span></td>

ng-repeat nested array in html tables

3 Answers3