无法使用 AngularJS 将 Json 数据与表头绑定

Question

我从 api 获取这种格式的数据，但是当我尝试使用 angularjs 将其绑定到表时，它会创建空白空间而不是值。我还从一些 Api 中获得了不止一个表，请解释谁也可以在不同的表中绑定不同的数据表。谢谢

{"Table": 
  [{ 
    "SchoolId":1, 
    "schoolname":"Microsoft",
    "SCHOOLCODE":"29911583", 
    "WEBSITE":"JLR",
    "USEREMAIL":"faucibus@aliquamiaculislacus.org", 
    "PHONE":"841-9331",
    "ADDRESS1":"682-5760 Felis Street", 
    "ISACTIVE":0, 
    "PLANTYPE":3 
  }] 
}

角度控制器

SMSApp.factory('GetStudentService', function ($http) {
    studobj = {};

    studobj.getAll = function () {
        var stud=[];

        stud = $http({ method: 'Get', url: 'http://localhost:58545/api/Student?Studentid=1' }).
            then(function (response) {
                return response.data;
            });
        return stud;
    };
    return studobj;
});

SMSApp.controller('studentController', function ($scope, GetStudentService) {
    $scope.msg = "Welcome from Controller";

    GetStudentService.getAll().then(function (result) {
        $scope.school = result;
        console.log(result);
    });

});

HTML 代码

 <tbody ng-controller="studentController">
     <tr ng-repeat="schools in school track by $index">
         <td>{{schools.SchoolId}}</td>
         <td>{{schools.schoolname}}</td>
         <td>{{schools.SCHOOLCODE}}</td>
         <td>{{schools.WEBSITE}}</td>
         <td>{{schools.USEREMAIL}}</td>
      </tr>
 </tbody>

我得到了什么

Answer 1

改变你的 Angular 控制器：

SMSApp.controller('studentController', function ($scope, GetStudentService) {
    $scope.msg = "Welcome from Controller";

    GetStudentService.getAll().then(function (result) {

   /********************* Changed Here ********************/

        $scope.school = JSON.parse(result._body); // Or only JSON.parse(result)
        $scope.school = $scope.school.table; 
    });

});

还有你的 HTML 代码：

 <tbody ng-controller="studentController">
     <tr ng-repeat="schools in school track by $index">
         <td>{{schools.SchoolId}}</td>
         <td>{{schools.schoolname}}</td>
         <td>{{schools.SCHOOLCODE}}</td>
         <td>{{schools.WEBSITE}}</td>
         <td>{{schools.USEREMAIL}}</td>
      </tr>
 </tbody>

Answer 2

将数据命名为 school 令人困惑。改为：

GetStudentService.getAll().then(function (data) {
    $scope.tableObj = data;
    console.log(data);
});

 <tbody ng-controller="studentController">
     <tr ng-repeat="school in tableObj.Table track by school.SchoolId">
         <td>{{school.SchoolId}}</td>
         <td>{{school.schoolname}}</td>
         <td>{{school.SCHOOLCODE}}</td>
         <td>{{school.WEBSITE}}</td>
         <td>{{school.USEREMAIL}}</td>
      </tr>
 </tbody>

来自文档：

最佳实践：如果您正在使用具有唯一标识符属性的对象，则应通过此标识符而不是对象实例进行跟踪，例如item in items track by item.id。如果您稍后重新加载数据，ngRepeat 将不必为它已经呈现的项目重建 DOM 元素，即使集合中的 JavaScript 对象已被替换为新对象。对于大型集合，这会显着提高渲染性能。

— AngularJS ng-repeat API Reference

Answer 3

只需在控制器中用 result.Table 替换您的结果，因为如果您正确地看到您的响应，它就在“Table”命名数组中。试试这个你应该可以看到你的记录

SMSApp.controller('studentController', function ($scope, GetStudentService) {
    $scope.msg = "Welcome from Controller";

    GetStudentService.getAll().then(function (result) {
        $scope.school = result.Table;
        console.log(result);
    });

});

注意：我已将 jsfiddle 链接中的 API 调用替换为问题中提到的响应。
JSFiddle 链接：http://jsfiddle.net/zu8q7go6/9/