无法使用 AngularJS 将 Json 数据与 Table Header 绑定

Question

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

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

Angular 控制器

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

命名数据 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>

来自文档：

Best Practice: If you are working with objects that have a unique identifier property, you should track by this identifier instead of the object instance, e.g. item in items track by item.id. Should you reload your data later, ngRepeat will not have to rebuild the DOM elements for items it has already rendered, even if the JavaScript objects in the collection have been substituted for new ones. For large collections, this significantly improves rendering performance.

— AngularJS ng-repeat API Reference

Answer 2

更改您的 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 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 link 中的 API 调用替换为问题中提到的响应。
JSFiddle Link : http://jsfiddle.net/zu8q7go6/9/

无法使用 AngularJS 将 Json 数据与 Table Header 绑定

Unable to bind Json Data with Table Header using AngularJS

json

angularjs

angularjs-ng-repeat