我有这个JSON
[{
"name":"student 1",<br>
"urn":"i98n-33",<br>
"courses":[{
"name":"computer science",
"points":17,
"outof":20
},{
"name":"mathematics",
"points":38,
"outof":40
}],<br>
"marks":55,<br>
"total":60<br>
},<br>{
"name":"student 2",<br>
"urn":"bb1r-66",<br>
"courses":[{
"name":"mathematics",
"points":29,
"outof":40
}, {
"name":"computer science",
"points":13,
"outof":20
}],<br>
"marks":41,<br>
"total":60
},<br>{
"name":"student 3",<br>
"urn":"7p85-404",<br>
"courses":[{
"name":"mathematics",
"points":20,
"outof":40
},{
"name":"computer science",
"points":12,
"outof":20
}],<br>
"marks":32,<br>
"total":60
}, {
"name":"MY TEST",<br>
"urn":"yrn9-819",<br>
"courses":[{
"name":"computer science",
"points":14,
"outof":20
},{
"name":"mathematics",
"points":12,
"outof":40
}],<br>
"marks":26,<br>
"total":60
}]
正如您所看到的,不同学生的课程索引是不同的,所以当我尝试重复它们时,混合起来
我希望以表格格式显示
<table>
<thead>
<tr>
<th>Index</th>
<th>Student names</th>
<th>course 1</th>
<th>course 2</th>
<th>course ..</th>
<th>course n</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>student 1</td>
<td>marks for course 1</td>
<td>marks for course 2</td>
<td>marks for course ..</td>
<td>marks for course n</td>
<td>Total marks</td>
</tr>
</tbody>
</table>
我不知道怎么做,任何帮助将不胜感激
您要求的是被称为数据透视表。有关更多说明,请参阅here。
控制器更改
/*Your JSON is here*/
$scope.studentsMarkSheet = [{
"name":"student 1",
"urn":"i98n-33",
"courses":[{
"name":"computer science",
"points":17,
"outof":20
},{
"name":"mathematics",
"points":38,
"outof":40
}],
"marks":55,
"total":60
},{
"name":"student 2",
"urn":"bb1r-66",
"courses":[{
"name":"mathematics",
"points":29,
"outof":40
}, {
"name":"computer science",
"points":13,
"outof":20
}],
"marks":41,
"total":60
},{
"name":"student 3",
"urn":"7p85-404",
"courses":[{
"name":"mathematics",
"points":20,
"outof":40
},{
"name":"computer science",
"points":12,
"outof":20
}],
"marks":32,
"total":60
}, {
"name":"MY TEST",
"urn":"yrn9-819",
"courses":[{
"name":"computer science",
"points":14,
"outof":20
},{
"name":"mathematics",
"points":12,
"outof":40
}],
"marks":26,
"total":60
}];
/*This will flatten the JSON structure and creates the data for the pivot table that is required for HTML table*/
$scope.studentsMarkSheet.forEach(function(sheet){
sheet.courses.forEach(function(course) {
sheet[course.name] = course.points;
});
});
/*This forms the header for the table - to be used in <th>*/
$scope.keys = Object.keys($scope.studentsMarkSheet[0]);
HTML更改
<!-- Changes required for HTML table -->
<table>
<tr>
<!-- This will put all the required columns for the table. Also we do not want the courses column here -->
<th ng-repeat="key in keys" ng-if="key !== 'courses'" ng-bind="key"></th>
</tr>
<tr ng-repeat="sheet in studentsMarkSheet">
<!-- Column header and column value key should be in the same order -->
<td ng-repeat="key in keys" ng-if="key !== 'courses'" ng-bind="sheet[key]"></td>
</tr>
</table>
首先从json对象中删除所有无效的<br>
标签。并尝试下面的代码
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div>
<table>
<thead>
<tr>
<th>Index</th>
<th>Student names</th>
<th>course 1</th>
<th>course 2</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in data">
<td>{{$index}}</td>
<td>{{person.name}}</td>
<td>{{person.courses[0].points}}</td>
<td>{{person.courses[1].points}}</td>
<td>{{person.marks}}</td>
</tr>
</tbody>
</table>
</div>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.data= [{
"name":"student 1",
"urn":"i98n-33",
"courses":[{
"name":"computer science",
"points":17,
"outof":20
},
{
"name":"mathematics",
"points":38,
"outof":40
}],
"marks":55,
"total":60
},{
"name":"student 2",
"urn":"bb1r-66",
"courses":[{
"name":"mathematics",
"points":29,
"outof":40
}, {
"name":"computer science",
"points":13,
"outof":20
}],
"marks":41,
"total":60
},{
"name":"student 3",
"urn":"7p85-404",
"courses":[{
"name":"mathematics",
"points":20,
"outof":40
},{
"name":"computer science",
"points":12,
"outof":20
}],
"marks":32,
"total":60
}, {
"name":"MY TEST",
"urn":"yrn9-819",
"courses":[{
"name":"computer science",
"points":14,
"outof":20
},{
"name":"mathematics",
"points":12,
"outof":40
}],
"marks":26,
"total":60
}];
});
</script>
</body>
</html>