ng-repeat 与静态 json 完美配合，但会触发动态 json 数据的异常

Question

我有一个 ng-repeat 放在列表中以在 table 中显示。

脚本html代码是这样的:

`<tr ng-repeat="user in users track by $index" ng-class="{'selected':$index == selectedRow}">
                    <td>
                        {{user.FirstName}}
                    </td>
                    <td>
                        {{user.LastName}}
                    </td>
                    <td>
                        {{user.EmailId}}
                    </td>
                    <td>
                        {{user.ContactNumber}}
                    </td>
                    <td>
                        <button type="button" class="btn btn-warning">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </button>
                        <button type="button" class="btn btn-danger">
                            <span class="glyphicon glyphicon-remove"></span>
                        </button>
                    </td>
                </tr>`

并且在 angular 脚本中路由定义如下：

var routingApp = angular.module('App', []);
routingApp.controller("MovieController", ['$scope', '$http', function ($scope, $http) {

$scope.edit = false;
$scope.error = false;
$scope.success = false;
//TO DO : Below portion to be replaced with ajax call to get list of movies from DB
var users = [
    { "UserId": 1, "FirstName": "user", "LastName": "1", "EmailId": "user1@gmail.com", "ContactNumber": 1234567890, "UserName": "User1", "Password": "Welcome@1" },
    { "UserId": 2, "FirstName": "user", "LastName": "2", "EmailId": "user2_1993@gmail.com", "ContactNumber": 7894612305, "UserName": "User2", "Password": "Welcome@2" },
    { "UserId": 3, "FirstName": "user", "LastName": "3", "EmailId": "user3@gmail.com", "ContactNumber": 1472583690, "UserName": "User3", "Password": "Welcome@3" },
    { "UserId": 4, "FirstName": "user", "LastName": "4", "EmailId": "user4@gmail.com", "ContactNumber": 7531598520, "UserName": "User4", "Password": "Welcome@4" },
    { "UserId": 5, "FirstName": "User", "LastName": "5", "EmailId": "user5@gmail.com", "ContactNumber": 4785961235, "UserName": "user5", "Password": "Welcome@5" }
];
console.log(users); //debugger;
    $scope.users = users;


}]);

这部分工作得非常好。

但是当我替换静态 json 数据时，即；

 var users = [
    { "UserId": 1, "FirstName": "user", "LastName": "1", "EmailId": "user1@gmail.com", "ContactNumber": 1234567890, "UserName": "User1", "Password": "Welcome@1" },
    { "UserId": 2, "FirstName": "user", "LastName": "2", "EmailId": "user2_1993@gmail.com", "ContactNumber": 7894612305, "UserName": "User2", "Password": "Welcome@2" },
    { "UserId": 3, "FirstName": "user", "LastName": "3", "EmailId": "user3@gmail.com", "ContactNumber": 1472583690, "UserName": "User3", "Password": "Welcome@3" },
    { "UserId": 4, "FirstName": "user", "LastName": "4", "EmailId": "user4@gmail.com", "ContactNumber": 7531598520, "UserName": "User4", "Password": "Welcome@4" },
    { "UserId": 5, "FirstName": "User", "LastName": "5", "EmailId": "user5@gmail.com", "ContactNumber": 4785961235, "UserName": "user5", "Password": "Welcome@5" }
];

和

$http.get("http://localhost:82/api/User/GetAllUsers")
.then(function (response) {
    dt = JSON.stringify(response.data);
    $scope.users = dt;
    //console.log(dt);
    //console.log(JSON.parse(dt));
})

它将通过这个例外:

`[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: user in users, Duplicate key: string:", Duplicate value`

但是 api 的输出与静态 json 完全相同，事实上我已经从 api 输出本身复制了 json。

我什至尝试删除 track by $index 但没有成功。这个问题有什么解决办法吗？

Answer 1

//dont stringify your api response and try this
$scope.users = response.data;

//html
<tr ng-repeat="user in users track by user.UserId" ng-class="{'selected':$index == selectedRow}">

Answer 2

尝试 JSON.parse 而不是 JSON.stringify，您正在尝试循环一个字符串（JSON.stringify returns 一个字符串）。无论如何，如果数据以 JSON 格式发回，只需分配数据即可。

Answer 3

试试下面的代码

 $http.get("http://localhost:82/api/User/GetAllUsers")
.then(function (response) {
dt = JSON.stringify(response.data);
$scope.users = response.data;

})

Answer 4

在不对响应进行字符串化的情况下尝试此操作并遍历用户。

$http.get("http://localhost:82/api/User/GetAllUsers")
.then(function (response) {

$scope.users = response.data;

})

ng-repeat 与静态 json 完美配合，但会触发动态 json 数据的异常

ng-repeat is Working perfectly with static json But fires exception with dynamic json data

html

ajax

angularjs

angular-routing