无法解析JSON数据并使用ng-repeat绑定到表中

时间:2016-08-11 11:12:17

标签: angularjs json asp.net-web-api angularjs-ng-repeat

基本上我想把我的json结果绑定到html表中,但得到以下提示错误:

     "Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.8/ngRepeat/dupes?p0=req%20in%20requiterTable&p1=string%3A%22&p2=%22
N/<@http://localhost:56557/Scripts/angular.min.js:6:412
Je</<.compile/</<@http://localhost:56557/Scripts/angular.min.js:302:477
vf/this.$get</m.prototype.$watchCollection/<@http://localhost:56557/Scripts/angular.min.js:142:77
vf/this.$get</m.prototype.$digest@http://localhost:56557/Scripts/angular.min.js:143:181
vf/this.$get</m.prototype.$apply@http://localhost:56557/Scripts/angular.min.js:146:111
l@http://localhost:56557/Scripts/angular.min.js:97:320
J@http://localhost:56557/Scripts/angular.min.js:102:34
gg/</t.onload@http://localhost:56557/Scripts/angular.min.js:103:4
EventHandlerNonNull*gg/<@http://localhost:56557/Scripts/angular.min.js:102:343
n@http://localhost:56557/Scripts/angular.min.js:99:53
m/p<@http://localhost:56557/Scripts/angular.min.js:96:262
e/<@http://localhost:56557/Scripts/angular.min.js:131:20
vf/this.$get</m.prototype.$eval@http://localhost:56557/Scripts/angular.min.js:145:343
vf/this.$get</m.prototype.$digest@http://localhost:56557/Scripts/angular.min.js:142:412
vf/this.$get</m.prototype.$apply@http://localhost:56557/Scripts/angular.min.js:146:111
EventHandlerNonNull*gg/<@http://localhost:56557/Scripts/angular.min.js:102:343
n@http://localhost:56557/Scripts/angular.min.js:99:53
m/p<@http://localhost:56557/Scripts/angular.min.js:96:262
e/<@http://localhost:56557/Scripts/angular.min.js:131:20
vf/this.$get</m.prototype.$eval@http://localhost:56557/Scripts/angular.min.js:145:343
vf/this.$get</m.prototype.$digest@http://localhost:56557/Scripts/angular.min.js:142:412
vf/this.$get</m.prototype.$apply@http://localhost:56557/Scripts/angular.min.js:146:111
Bc/c/<@http://localhost:56557/Scripts/angular.min.js:20:486
h/<.invoke@http://localhost:56557/Scripts/angular.min.js:41:454
Bc/c@http://localhost:56557/Scripts/angular.min.js:20:407
Bc@http://localhost:56557/Scripts/angular.min.js:21:179
fe@http://localhost:56557/Scripts/angular.min.js:20:1
@http://localhost:56557/Scripts/angular.min.js:317:386
b@http://localhost:56557/Scripts/angular.min.js:189:487
Sf@http://localhost:56557/Scripts/angular.min.js:37:125
Rf/d@http://localhost:56557/Scripts/angular.min.js:37:74
EventListener.handleEvent*.on/h@http://localhost:56557/Scripts/angular.min.js:195:22
.on@http://localhost:56557/Scripts/angular.min.js:195:108
O.prototype[b]@http://localhost:56557/Scripts/angular.min.js:198:332
O.prototype.ready@http://localhost:56557/Scripts/angular.min.js:190:40
@http://localhost:56557/Scripts/angular.min.js:317:355
@http://localhost:56557/Scripts/angular.min.js:6:2

下面是我的JS服务,它返回了我提到的json结果

app.service('RequitersService', function ($http) {
    this.GetAllRquiters = function ()
    {
        return $http.get("api/Requiters");
    }
});

Json结果:

"[{\"id\":2,\"name\":\"Amit\",\"email\":\"amit@gmail.com\",\"mobile\":\"9999999999\",\"skill\":\"Asp.net\",\"profession\":\"Software Engineer\",\"exp\":\"2\",\"location\":\"Delhi\",\"resume\":null,\"is_type\":null,\"is_active\":false,\"last_login\":\"Jul 5 2016 4:49PM\",\"date_time\":null}]"

我的控制器代码:

app.controller('Requiters', function ($scope, RequitersService) {
    var result = RequitersService.GetAllRquiters();
    result.then(function (x) {
        debugger;
        alert(x.data);
        $scope.requiterTable = x.data;
    });
});

下面是我的html页面代码,它在控制台

中给出了错误
<table >
    <tr ng-repeat="req in requiterTable">
        <td>{{req.id}}</td>
        <td>{{req.name}}</td>
        <td>{{req.email}}</td>
        <td>{{req.mobile}}</td>
        <td>{{req.location}}</td>
    </tr>
</table>

1 个答案:

答案 0 :(得分:0)

添加track by以帮助角度区分对象并跟踪更改:

<tr ng-repeat="req in requiterTable track by req.id">