Angular JS : creating table with json

Question

I've created an application in angular-JS for creating table with dynamic columns from json

For example the JSON structure returning from a service is in the structure where the others field of the main JSON contains another JSON array which is the additional columns,

so all together there will be four additional dynamic columns i.e File 1, File 2, File 3, File 4 each object has value for the corresponding File field, sometime present sometime not present.

$scope.getColumns = function()
{
    //console.log( $scope.datas[0].others[0]);
  $scope.datas.resultsOrder = new Array();
     for ( var i = 0; i < $scope.datas.length; i++)
     {
       for ( var j = 0; j < $scope.datas[i].others.length; j++)
        {
        if (countInstances($scope.datas.resultsOrder, $scope.datas[i].others[j].id) < countInstances(
                    $scope.datas[i].others, $scope.datas[i].others[j].id)){
           $scope.datas.resultsOrder.push($scope.datas[i].others[j].id);
         }
        }
      }        
$scope.datas.resultsOrder.sort(function(a, b){
    return a.localeCompare(b);
  });
return $scope.datas.resultsOrder;
}

I've shown the tables with the dynamic columns perfectly using javascript help, but can anyone please tell me some other way for creating the above dynamic table through angular js in a simple way, since in my code I've used javascript complex logic for the creation of dynamic columns which is as shown below

My JS-Fiddle is given below

Demo

Gruff Bunny · Accepted Answer · 2014-03-09 09:51:17Z

3

This wll create an object called columns where the properties are the names of the dynamic columns ('File 1', 'File 2' etc.)

Controller:

$scope.columns = {};

angular.forEach( $scope.datas, function(data){

    angular.forEach( data.others, function(other){

        // Set the 'File x' property for each item in the others array
        data[other.id] = other.value;

        // Add the dyanmic column to the columns object
        $scope.columns[other.id] = null;
    });
});

View:

<!-- table header -->
<tr>
    <th ng-repeat="(column,val) in columns">
        <a ng-click="sort_by()"><i>{{column}}</i></a>
    </th>
....
</tr>

<!-- data rows -->
<td ng-repeat="(column,v) in columns">{{val[column]}}</td>

Fiddle

edited Mar 9, 2014 at 9:51

answered Mar 8, 2014 at 20:46

Gruff Bunny

28k10 gold badges74 silver badges61 bronze badges

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

7 Comments

Alex Man Over a year ago

But here we have to hard code the File 1, File 2, File 3, File 4 within fileInfo variable right....since we cant do that....because those dynamic columns will be different in sometimes.....is there any other way to make that too dynamic....

Alex Man Over a year ago

how about duplicate columns say if i have two File 1 with different values for the first object, then there should be two File 1 columns right...

Gruff Bunny Over a year ago

This solution won't cater for duplicate columns. I'll delete it if you mark the answer as unaccepted. Thanks.

Alex Man Over a year ago

is it possible to create duplicate columns

Gruff Bunny Over a year ago

Yes but not with this solution as it uses properties for each f the item in the others array. If you could unaccept the answer I'll delete it.

|

Collectives™ on Stack Overflow

Angular JS : creating table with json

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related