用angularjs显示二维数组

Question

我有这个 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
   }]

正如您所见，课程索引对于不同的学生是不同的，所以当我尝试 ng-repeat 时会混淆

我想以表格格式显示，例如

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

我不知道怎么做，任何帮助将不胜感激

Answer 1

您所要求的称为数据透视表。更多解释见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>

Answer 2

首先从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>