nested arrays with ng-repeat and table html

Question

I want to take this json place it into a HTML table.

    "columns" : [ 
    {
        "id" : 0,
        "column_name" : "Column 1",
        "cards" : [ 
            {
                "id" : 0,
                "task" : "Task 1"
            }, 
            {
                "id" : 1,
                "task" : "Task 2"
            }
        ]
    }, 
    {
        "id" : 1,
        "column_name" : "Column 2",
        "cards" : [ 
            {
                "id" : 0,
                "task" : "Task 3"
            }
        ]
    }]

I have done quite a bit of searching on SO and cannot find why it is not doing what I expect.

https://jsfiddle.net/6nh100ca/9/

This is what I am expecting.

**Column 1 | Column 2**
Task 1   | Task 3
Task 2   |

https://stackoverflow.com/a/20063394/3279550 http://www.bennadel.com/blog/2456-grouping-nested-ngrepeat-lists-in-angularjs.htm https://stackoverflow.com/a/26607425/3279550

This is what I have

    <table >
        <thead >
            <tr>
                <th ng-repeat="column in entity.columns">{{column.column_name}}</th>
            </tr>
        </thead>
        <tbody ng-repeat="column in entity.columns" >
            <tr ng-repeat="card in column.cards">
                <td >{{card.task}}</td>
            </tr>
        </tbody>
    </table>

You should look into one of the table directives like `ui-grid`. Much better than making your own custom table — David says Reinstate Monica, Mar 28 '15 at 18:51
are you looking something like that https://jsfiddle.net/6nh100ca/11/ — Poyraz Yilmaz, Mar 28 '15 at 19:02

Pankaj Parkar · Answer 1 · 2016-06-23T13:24:15.267

3

column.columnName should be column.column_name as per your example data, there after you could have two ng-repeat over a data where you will be actually have 1st ng-repeat over tbody & then the another will appear on tr. I'd prefer this approach when I have small data set. For larger data set the answer given by @Tiago is fine.

<table >
    <thead >
        <tr>
            <th ng-repeat="column in entity.columns">{{column.columnName}}</th>
        </tr>
    </thead>
    <tbody ng-repeat="column in entity.columns" >
        <tr ng-repeat="card in column.cards">
            <td >{{card.task}}</td>
        </tr>
    </tbody>
</table>

edited Jun 23 '16 at 13:24

answered Mar 28 '15 at 19:15

Pankaj Parkar

134,766
23
234
299

Unfortunately this was not what I expected. It showed the following. ``` |Column 1|Column 2 | |Task1 | | |Task2 | | |Task3 | | I would have expected the Task 3 to be in the second column – user3279550 Apr 13 '15 at 10:53
I don't like this at all. You are repeating tbody every time, which makes no sense – iberbeu Jun 23 '16 at 13:03
@iberbeu what problem you are seeing with it, Its valid HTML.. I know repeating over a time is what you aren't agree? – Pankaj Parkar Jun 23 '16 at 13:10
Your answer is actually right, so I will remove the downvote. Anyway I would like to know how to do this without repeating the tbody section because sometimes it is just not required and it makes no sense to repeat if not needed – iberbeu Jun 23 '16 at 13:16
1

@iberbeu but that would need another filter, or manual filtering, but yes, I noted your point, for large data set we should reformat/filter data before rendering(with single `ng-repeat`) otherwise for smaller data I'd prefer my approach, as per me it would not harm anything on page. – Pankaj Parkar Jun 23 '16 at 13:22
@iberbeu here you go, you could remove downvote now, if you want, Thanks for heads up, cheers :) – Pankaj Parkar Jun 23 '16 at 13:25

Tiago Martins · Accepted Answer · 2015-03-28T22:52:32.817

If you want to stick with creating your own <table> manually, you need to pre-process your data object in order to fit the row logic. Try something like this fiddle:

Add this in your controller:

 $scope.rowColumns = [];
    $scope.columns.forEach(function(column, columnIndex){
        column.cards.forEach(function (card, rowIndex){
            if (!$scope.rowColumns[rowIndex])
                $scope.rowColumns[rowIndex] = [];
            $scope.rowColumns[rowIndex][columnIndex] = card;
        });
    });
    console.log($scope.rowColumns);

Then add this in your html:

   <tr ng-repeat="row in rowColumns">
      <td ng-repeat="cell in row">
           {{cell.task}}
      </td>
   </tr>

That was exactly it. Only I had been hopping to not have to rearrange the data using the controller. Which seems a bit naive now. Thank you for the help. — user3279550, Mar 28 '15 at 19:40

nested arrays with ng-repeat and table html

2 Answers2