CODEWITHSUNDEEP
javascriptangularjsjson
joy08
joy08

Reputation: 9652

while using ng-repeat tag with json data

When I get the data in JSON format and try to print it using ng-repeat tag, I get the error

ng-dupes error

<table>
    <tr ng-repeat="emp in empArr">
      <td>{{emp.empcode}}</td>
      <td>{{emp.empName}}</td>
    </tr>
</table>

Also the AngularJS function which is retrieving the json format :

$scope.Show = function() {

$http.get("get_oracle_data.jsp?sqlStr=SELECT empcode,empname from emp")
    .then(function(response) {
       $scope.empArr = response.data;
});

Can anyone tell me what is wrong with this?

Upvotes: 0

Views: 56

Answers (3)

Kunvar Singh
Kunvar Singh

Reputation: 1885

You may try for this:

track by $index is used for remove duplicacy from array list:

<table>
    <tr ng-repeat="emp in empArr track by $index">
    <td>{{emp.empcode}}</td>
        <td>{{emp.empName}}</td>
    </tr>
</table>

Upvotes: 0

Sandeep Bhaskar
Sandeep Bhaskar

Reputation: 300

you can check the similar example here in this fiddle

jsfiddle

      <div ng-app='t' ng-controller='test'>
            <div ng-repeat='x in DATA'>
                <p>
                    <label>Title: </label> {{x.complaint_title}}
                </p>
            </div>
    </div>

    (function(){

        var app = angular.module('t', []);

        app.controller('test', 
          [
              '$scope', 
              function($scope)                            
              {
                $scope.DATA = [
                  {
                    "complaint_id": "1",
                    "complaint_title": "blah",
                    "complaint_desc": "gdga",               
                    "incident_date": "2015-02-28"
                  },
                  {
                    "complaint_id": "2",
                    "complaint_title": "gbsdsg",
                    "complaint_desc": "asadf",               
                    "incident_date": "2015-02-27"
                  }

                ];

                }
          ]);//controller

})();//closure

Upvotes: -1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41417

use the trackBy to avoid duplication error.

<table>
    <tr ng-repeat="emp in empArr track by $index">
    <td>{{emp.empcode}}</td>
        <td>{{emp.empName}}</td>
    </tr>
</table>

Upvotes: 3

Related Questions