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

javascript jquery json angularjs

14,369

Solution 1

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.

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

14,369

Author by

Priya

Updated on June 13, 2022

Comments

Priya almost 2 years

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?