AngularJS dynamic table with unknown number of columns

Question

I'm new to Angular and I need some start point for my project. How can I create new table from ajax data by mouse click on the background? I know that ajax data has unknown number of columns and can be different from time to time.

For example:

the first click on background = table 1, ajax request to /api/table
| A | B | C |
| 1 | 2 | 3 |
| 5 | 7 | 9 |

the second click on background = table 2 and server returns new data from the same url /api/table
| X | Y |
| 5 | 3 |
| 8 | 9 |

Answer 1

You could basically use two nested ng-repeats in the following way:

<table border="1" ng-repeat="table in tables">
  <tr>
      <th ng-repeat="column in table.cols">{{column}}</th>
  </tr>
  <tr ng-repeat="row in table.rows">
    <td ng-repeat="column in table.cols">{{row[column]}}</td>
  </tr>
</table>

In the controller:

function MyCtrl($scope, $http) {
    $scope.index = 0;
    $scope.tables = [];
    $scope.loadNew = function() {
        $http.get(/*url*/).success(function(result) {
            $scope.tables.push({rows: result, cols: Object.keys(result)});
        });
        $scope.index++;
    }
}

Then call loadNew() somewhere, eg. <div ng-click="loadNew()"></div>

Example: http://jsfiddle.net/v6ruo7mj/1/

Answer 2

register the ng-click directive on your background element to load data via ajax, and use ng-repeat to display data of uncertain length

<div ng-click="loadData()">
    <table ng-repeat="t in tables">
        <tr ng-repeat="row in t.data.rows">
            <td ng-repeat="col in row.cols">
                {{col.data}}
            </td>
        </tr>
    </table>
</div>

in the controller:

$scope.tables = [];

$scope.loadData = function() {
    // ajax call .... load into $scope.data

    $.ajax( url, {
        // settings..
    }).done(function(ajax_data){
        $scope.tables.push({
            data: ajax_data
        });
    });

};

Answer 3

I have an array of column names named columns and a 2D array of rows called rows. This solution works with an arbitrary number of rows and columns. In my example each row has an element called 'item' which contains the data. It is important to note that the number of columns is equal to the number of items per row we want to display.

<thead> 
    <tr>
        <th ng-repeat="column in columns">{{column}}</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="row in rows">
        <td ng-repeat="column in columns track by $index"> {{row.item[$index]}} </td>
    </tr>
</tbody>

Hope this helps