javascript - nested arrays with ng-repeat and table html -

i want take json place 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 bit of searching on , cannot find why not doing expect.

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

this 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 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> 

if want stick creating own <table> manually, need pre-process data object in order fit row logic. try this fiddle:

add in 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 in html:

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