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

正如您所看到的课程索引对于不同的学生而言是不同的，所以当我尝试重复它们时，混合

我想以表格格式显示

<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

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

使用angularjs显示2D数组

1 个答案: