使用angular.js在ng-repeat中获取错误

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.

Answer 1

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