ngRepeat：dupes-在对象数组上

Question

ng-repeat showing "Duplicate Key in Repeater" over JSON object array. "track by $index" is also not working.

Angular code

        result = doAjaxCall('','json',"http://localhost:8181/admin/last10query");           
        $scope.querylist = result;
        console.log($scope.querylist);

HTML code

<tr ng-repeat="x in querylist">
   <td>{{x.query}}</td>
   <td>{{x.id}}</td>  
</tr> 

the JSON array

[{"id":38,"query":"mm","temp_id":null,"topic_id":null},
{"id":37,"query":"n","temp_id":null,"topic_id":null},
{"id":36,"query":"nn","temp_id":null,"topic_id":null},
{"id":35,"query":"mm","temp_id":null,"topic_id":null},
{"id":34,"query":"nn","temp_id":null,"topic_id":null},
{"id":33,"query":"m","temp_id":null,"topic_id":null},
{"id":32,"query":"m","temp_id":null,"topic_id":null},
{"id":31,"query":"hi","temp_id":null,"topic_id":null},
{"id":30,"query":"j","temp_id":null,"topic_id":null},
{"id":29,"query":"h","temp_id":null,"topic_id":null}]

Answer 1

 angular.module("a",[]).controller("ac",function($scope){ $scope.querylist =[{"id":38,"query":"mm","temp_id":null,"topic_id":null}, {"id":37,"query":"n","temp_id":null,"topic_id":null}, {"id":36,"query":"nn","temp_id":null,"topic_id":null}, {"id":35,"query":"mm","temp_id":null,"topic_id":null}, {"id":34,"query":"nn","temp_id":null,"topic_id":null}, {"id":33,"query":"m","temp_id":null,"topic_id":null}, {"id":32,"query":"m","temp_id":null,"topic_id":null}, {"id":31,"query":"hi","temp_id":null,"topic_id":null}, {"id":30,"query":"j","temp_id":null,"topic_id":null}, {"id":29,"query":"h","temp_id":null,"topic_id":null}]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="a" ng-controller="ac"> <table> <tr ng-repeat="x in querylist track by $index"> <td>{{x.query}}</td> <td>{{x.id}}</td> </tr> </table> </div> 

I don't know how you are getting the error. See the snippet it is working for us.

I got this kind of issues in Angular 2. So in this case you could initialize the querylist object globally.

please do this

$scope.querylist =[]
 result = doAjaxCall('','json',"http://localhost:8181/admin/last10query");           
        $scope.querylist = result;
        console.log($scope.querylist);

Answer 2

If your json objects have unique Id, Then you can try track by id ,

ex:

<tr ng-repeat="x in querylist track by x.id">
   <td>{{x.query}}</td>
   <td>{{x.id}}</td>  
</tr> 

Answer 3

I have solved the issue by using angular $http.get, i dont know why custom ajxa is not working.

    $http.get("http://localhost:8181/admin/last10query")
      .then(function(response) {
         $scope.myWelcome = response.data;
    });