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?
2 answers
solution1
4 ACCPTED 2015-05-28 08:18:24
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.
solution2
2 2015-05-28 08:01:03
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.