ng-repeat fonctionne parfaitement avec json statique Mais fire exception avec des données dynamiques json

Question

J'ai une ng-repeat placée dans une liste à afficher dans le tableau.

le code html script est comme ceci:

`<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>` 

et dans le script angulaire du routage est défini comme ci-dessous:

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; 


}]); 

Cette partie fonctionne tout à fait bien.

mais quand je remplace les données json statiques c.-à-d.

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

avec

$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)); 
}) 

ce sera par cette exception:

`[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` 

Mais la sortie du api est exactement le même que JSON statique, en fait je l'ai copié JSON de sortie api lui-même.

Même j'ai essayé d'enlever track by $index mais pas de chance. existe-t-il des solutions à ce problème?

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

Essayez JSON.parse au lieu de JSON.stringify, vous essayez de boucle sur une chaîne (JSON.stringify retourne une chaîne). Quoi qu'il en soit, si les données sont renvoyées au format JSON, il suffit d'assigner les données.

Answer 3

essayer avec le code ci-dessous

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

}) 

Answer 4

essayer sans stringifying la réponse et itrate par les utilisateurs.

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

$scope.users = response.data; 

})