Getting error in ng-repeat using angular.js

Question

I am getting the below error while using ng-repeat in Angular.js.

Error:

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.4.6/ngRepeat/dupes?p0=ses%20in%20sectionData&p1=string%3Al&p2=l
    at Error (native)
    at http://oditek.in/Gofasto/js/angularjs.js:6:416
    at http://oditek.in/Gofasto/js/angularjs.js:279:39
    at Object.fn (http://oditek.in/Gofasto/js/angularjs.js:129:128)
    at n.$digest (http://oditek.in/Gofasto/js/angularjs.js:130:206)
    at n.$apply (http://oditek.in/Gofasto/js/angularjs.js:133:236)
    at g (http://oditek.in/Gofasto/js/angularjs.js:87:376)
    at K (http://oditek.in/Gofasto/js/angularjs.js:91:448)
    at XMLHttpRequest.z.onload (http://oditek.in/Gofasto/js/angularjs.js:92:462)

I am explaining my code below.

<tbody id="detailsstockid">
<tr ng-repeat="ses in sectionData">
<td>{{$index+1}}</td>
<td>{{ses.colg_name}}</td>
<td>{{ses.session}}</td>
<td>
<!--<a ui-sref='dashboard.profile({p_i:profile.profile_id})'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="reload();">  
</a>-->
<a ui-sref='dashboard.res.session'>
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editSessionData(ses.session_id);">  
</a>
</td>
<td>
<a ui-sref='dashboard.res.session'>
<input type='button' class='btn btn-xs btn-red' value='Remove' ng-click="deleteSessionData(ses.session_id);" >  
</a>
</td>
</tr>   
</tbody>

Here my requirement is while i will submit my form the data will suddenly display on the above list.Please check my below controller part.

var userdata={'colg_name':$scope.colg_name.value,'session':$scope.session};
                $http({
                    method:'POST',
                    url:"php/resource/addSessionData.php",
                    data:userdata,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                }).then(function successCallback(response){
                    alert(response.data['msg']);
                    $scope.colg_name.value='';
                    $scope.session=null;
                    $scope.sectionData.unshift(response.data);
                },function errorCallback(response) {
                    alert(response.data['msg']);
                    $state.go('dashboard.res.session',{}, { reload: true });
                });


$http({
        method:'GET',
        url:"php/resource/readSessionData.php",
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
    }).then(function successCallback(response){
        $scope.sessionData=response.data;
    },function errorCallback(response) {
    });

Here when user will inserting the data first time into DB after inserting the data should display on the list but here its throwing the below error after inserting into database.

Error-2:

TypeError: $scope.sectionData.unshift is not a function
    at successCallback (resourceSessionController.js:48)
    at angularjs.js:118
    at n.$eval (angularjs.js:132)
    at n.$digest (angularjs.js:129)
    at n.$apply (angularjs.js:133)
    at g (angularjs.js:87)
    at K (angularjs.js:91)
    at XMLHttpRequest.z.onload (angularjs.js:92)

Please help me to resolve those above errors.

Abhilash Augustine · Accepted Answer · 2015-11-04 05:33:15Z

2

It caused by the duplicate values in your data sectionData. You can fix this issue by adding a track by with in your ng-repeat like below,

<tr ng-repeat="ses in sectionData track by $index">

Update

if($scope.sectionData != null && $scope.sectionData.length > 0){
    $scope.sectionData.unshift(response.data);
}
else{
    $scope.sectionData = response.data;
}

edited Nov 4, 2015 at 5:33

answered Nov 4, 2015 at 4:36

Abhilash Augustine

4,2081 gold badge26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user5443928 Over a year ago

@ Abilash: Ok adding your code the 1st error is not coming but when database is blank in the table i am getting the 4 blank row.Let me to add my read from database code when page loading.

Abhilash Augustine Over a year ago

@subhra, what is this for $scope.sectionData.unshift(response.data)?

user5443928 Over a year ago

@ Abilash : it will add the just inserted data into the table.response.data will contain the inserted data from database.I am using unshift for adding the data in top of list at each time.

Abhilash Augustine Over a year ago

@subhra, ok. I think you missed to link jquery to your application.

Abhilash Augustine Over a year ago

@subhra, array.unshift() is a javascript's function.

|

Collectives™ on Stack Overflow

Getting error in ng-repeat using angular.js

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related