Render array of arrays table in Angular using ng-repeat

Question

I have an array of arrays (representing rows and columns) and I need to render an HTML table with the data.

Each row is an array of column values, for example: $scope.table.row[0] = [123, 456, 789]

This is my attempt (that doesn't work). Any ideas?

<table>
    <tbody>
        <tr ng-repeat="row in table">
            <td ng-repeat="col in row">{{col}}</td>
        </tr>    
    </tbody>
</table>

$scope.table.row[0] = [123, 456, 789]; $scope.table.row[1] = [111, 222, 333]; $scope.table.row[2] = [444, 555, 777] — ps0604
– ps0604, Commented Jul 28, 2016 at 10:52
Then you need either <tr ng-repeat="row in table.row"> or ` table[0] = [123, 456, 789]; table[1] = [111, 222, 333]; table[2] = [444, 555, 777]` — Yury Tarabanko
– Yury Tarabanko, Commented Jul 28, 2016 at 10:57

Yury Tarabanko · Accepted Answer · 2016-07-28 11:00:44Z

6

You either need to iterate over table.row or make table an array of arrays itself. Demo.

<table>
    <tbody>
        <tr ng-repeat="row in table.row">
            <td ng-repeat="col in row">{{col}}</td>
        </tr>    
    </tbody>
</table>

OR

table = [ [123, 456, 789], [111, 222, 333], [111, 222, 333]]

<table>
    <tbody>
        <tr ng-repeat="row in table">
            <td ng-repeat="col in row">{{col}}</td>
        </tr>    
    </tbody>
</table>

answered Jul 28, 2016 at 11:00

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

Comments

Ehsan · Accepted Answer · 2018-09-23 12:49:00Z

1

Also you can use *ngFor like this:

rows = [['a1','a2', 'a3'],['b1','b2', 'b3'],['c1','c2', 'c3']]'
<table>
  <tbody>
    <tr *ngFor="let row of rows">
      <td *ngFor="let item of row">
        {{ item }}
      </td>
    </tr>
  </tbody>
</table>

result:

a1 a2 a3
b1 b2 b3
c1 c2 c3

answered Sep 23, 2018 at 12:49

Ehsan

3086 silver badges17 bronze badges

Collectives™ on Stack Overflow

Render array of arrays table in Angular using ng-repeat

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related