Web Engineer Web Engineer - 6 months ago 373
Javascript Question

How to automatically load/refresh view data after delete in AngularJS?

I am working on a Web Application using Laravel as backend API and AngularJS for frontend. I have successfully fetched the data from Laravel API and displayed it via AngularJS ng-repeat. Now i want a delete button for each record which is displayed in the table. When a user click that delete button it should delete the clicked record.

I did the following try which is working perfectly.But the problem occurs when i click delete button it deletes record from database but it is not refreshing the records list , instead of refreshing it just shows the headers titles of table and nothing else. When i manually refresh it from browser then it displays back the records list. I want to load the list automatically after the record is deleted.


Console Error : Console Error: DELETE
http://localhost/ngresulty/public/api/result/50?id=50 500 (Internal
Server Error)


Before Delete ( List ):

All records list
After delete Scene:

When I press delete , the record is deleted from database but list looks like this

MainCtrl.js

$scope.deleteResult = function(id) {
$scope.loading = true;

Result.destroy(id)
.success(function(data) {
// if successful, we'll need to refresh the comment list
Result.get()
.success(function(data) {
$scope.students = data;
$scope.loading = false;
});


});
};


MyAppService.js

angular.module('myAppService', [])

.factory('Result', function($http) {
return {
get : function() {
return $http.get('api/result');
},
show : function(id) {
return $http.get('api/result/' + id);
},
save : function(resultData) {
return $http({
method: 'POST',
url: 'api/result',
headers: { 'Content-Type' : 'application/x-www-form-urlencoded' },
data: $.param(resultData)
});
},
destroy : function(id) {
return $http.delete('api/result/' + id,{params: {id}});
}
}

});


App.js

var myApp = angular.module('myApp', ['mainCtrl', 'myAppService']);


Results View :

<table class="table table-striped">
<thead>
<tr>
<th>Roll No</th>
<th>Student Name</th>
<th>Father Name</th>
<th>Obtained Marks</th>
<th>Total Marks</th>
<th>Percentage</th>
<th>Delete</th>
</tr>
</thead>
<tbody ng-hide="loading" ng-repeat="student in students | filter:searchText">
<tr>
<td>@{{ student.rollno }}</td>
<td>@{{ student.name }}</td>
<td>@{{ student.fname }}</td>
<td>@{{ student.obtainedmarks }}</td>
<td>@{{ student.totalmarks }}</td>
<td>@{{ student.percentage }}</td>
<td>
<a href="#" ng-click="deleteResult(student.id)" class="text-muted btn-danger btn-lg">Delete</a></p>
</td>

</tr>
</tbody>
</table>


What I tried but not working :

$scope.deleteResult = function(id) {
$scope.loading = true;

Result.destroy(id)
.success(function(data) {

// do something with data if you want to
$scope.students.splice(id, 1);

});
};


Solution :
Whenever you get 500 internal error the issue will be from server side. The issue was with server side all i did was change my destroy service to

destroy : function(id) {
return $http.delete('api/result/' + id);
}


and in laravel controller i was returning a bool value true but i changed that to ID

return \Response::json($studentid);


because i was in need of that ID for success return and then it worked like a charm.

Answer

You are splicing the data incorrectly.

Do like this to splice the data in destroy success block.

var del_index = $scope.students.findIndex(function(d){return d.id == id});
if(del_index>0)//if index of the id to be removed found
  $scope.students.splice(del_index, 1);