How to Generate column heading and table values dynamically from JSON array in angularjs?

Question

In a page I have two radio buttons and the two radio buttons produce different results:

First button is about Student Details. My json array looks like this :

 [{"Name":"A", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
  {"Name":"B", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
  {"Name":"C", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
  {"Name":"D", "Class":"x", "Section":"abcd", "DOB": "XYZ"}]

My second button is academic details. My json array looks like this :

  [{"Name":"A", "Language":"x", "English":"90", "Maths": "90"},
   {"Name":"B", "Language":"x", "English":"80", "Maths": "80"},
   {"Name":"C", "Language":"x", "English":"70", "Maths": "70"},
   {"Name":"D", "Language":"x", "English":"60", "Maths": "60"}]

Previously I followed code similar like this

<body>
  <div ng-app="" ng-init='names =  [{"Name":"A", "Class":"x", "Section":"abcd", "DOB": "XYZ"},
      {"Name ":"B ", "Class ":"x ", "Section ":"abcd ", "DOB ": "XYZ "},
      {"Name ":"C ", "Class ":"x ", "Section ":"abcd ", "DOB ": "XYZ "},
      {"Name ":"D ", "Class ":"x ", "Section ":"abcd ", "DOB ": "XYZ "}];'>

    <table border="2px">
      <tr>
        <th>
          Name
        </th>
        <th>
          Class
        </th>
        <th>
          Section
        </th>
        <th>
          DOB
        </th>
      </tr>

      <tr ng-repeat="x in names">
        <td>
          {{ x.Name}}
        </td>
        <td>
          {{x.Class}}
        </td>
        <td>
          {{x. Section}}
        </td>
        <td>
          {{x. DOB}}
        </td>
      </tr>
    </table>
  </div>
</body>

But now the table columns and table values differs. With the output json, I have to build table dynamically since table column name cannot be defined.

Could anyone help with this?

Jai · Accepted Answer · 2015-05-28 11:37:17Z

Well i suggest you to maintain two things in angular code, keys to show as header and data to show in the table rows.

What i meant is if you have a controller defined in your application then you can do this:

The controller:

app.controller(['$scope', function($scope){
  $scope.obj = {};
  $scope.obj.key = []; // store the keys here
  $scope.obj.data = []; // store the data here

  $scope.changeData = function(key, data) {
    $scope.obj.data = data;
    $scope.obj.key = key;
    $scope.$apply(function() { // use this to apply changes.
      return $scope.obj;
    });
  };
}]);

bind the click event in the directives:

app.directive('YourDirective', function(){
    return {
       restrict: 'E',
       templateUrl: 'template.html', // where you have buttons and table
       link: function (scope, element) {
           angular.element(element).find('button').on('click', function(e){
              // Your ajax call here when you get the response then you can
              // update the $scope.data
              var key = Object.keys(data[0]);
              var data = data;
              scope.changeData(key, data);
           });
       }
   };
});

Then in your template:

<table border="2px">
  <tr>
    <th ng-repeat="th in keys">{{th}}</th>
  </tr>
  <tr ng-repeat="x in data">
    <td ng-repeat="th in keys">
        {{ x[th]}}
    </td>
  </tr>
</table>

A plnkr for this.

OrenD · Accepted Answer · 2015-05-28 08:01:03Z

2

In your controller, you can create a list of the column headers by using:

$scope.colHeaders = Object.keys($scope.names[0])

You should first make sure the names list contains at least one object. Also note that older browsers may have an issue with Object.keys() but there are workarounds, if needed.

Now in your view, you can render the table headers by using:

<th ng-repeat="header in colHeaders">{{ header }}</th>

And your table rendering should look something like this:

<tr ng-repeat="x in names">
  <td ng-repeat="header in colHeaders">
    {{ x[header] }}
  </td>
</tr>

answered May 28, 2015 at 8:01

OrenD

1,74113 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to Generate column heading and table values dynamically from JSON array in angularjs?

2 Answers 2

A plnkr for this.

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related