In Angularjs, how to update table data after deleting a row from it

Question

I am using angularjs to call the Asp.net Web API. After deleting a row from a table?

I also did not find a solution in w3schools.

My html code

<tr ng-repeat="user in users | filter: search"> <td>{{ user.Id }}</td> <td>{{ user.FullName }}</td> <td>{{ user.Mobile }}</td> <td>{{ user.Birthdate }}</td> <td>{{ user.Gender }}</td> <td>{{ user.AcademicLevel }}</td> <td> 

My Angularjs Code

 $scope.DeleteUser = function (id) { UserID = $scope.users[id].Id; $http.delete('/api/users/' + UserID).success(function (data) { (function (data) { $scope.error = "error " + data; }); } 

I searched on Stackoverflow, I found some of them where they did not work for me, they confused me.

 $scope.refresh() $scope.apply(); 

Answer 1

First of all, processing server requests in the controller is a bad idea. As a rule, use the service of delegating calls to the server and use the controller to "stick" your models to your view.

There are several problems in the code; it should look something like this:

 $scope.DeleteUser = function (id) { var userId = $scope.users[id].Id; $http.delete('/api/users/' + userId) .success(function (data) { $scope.error = "error " + data; }); } 

Even if the server call was successful, you never updated your external model. What you read on other topics related to $ scope.refresh (), I suppose this is intended to fetch the data again like this:

 $scope.refresh = function(){ $http.get('/api/users') .success(function(data){ $scope.users = data; }); } 

So, to update your view, you must update your model.

 $scope.DeleteUser = function (id) { var userId = $scope.users[id].Id; $http.delete('/api/users/' + userId) .success(function (data) { //either this $scope.refresh(); //or this $scope.users.splice(id,1); }); } 

Answer 2

Two solutions: after you have completed the deletion, remove the user from the users array by making a fragment:

 $scope.DeleteUser = function (index) { var UserID = $scope.users[index].Id; $http.delete('/api/users/' + UserID).then(function(del) { $scope.users.splice(index,1); }); } 

You can get the user index using $ index in your ng replay, but since your code may be asynchronous, this is not recommended.

Or you can just make another access from your API as soon as your deletion is allowed.

 $scope.DeleteUser = function (index) { var UserID = $scope.users[index].Id; $http.delete('/api/users/' + UserID).then(function(del) { $http.get('/api/users').then(function(data){ $scope.users = data; }); }); } 

But ... What if the person using your application removes users faster than your API can?

The first solution will not work for sure, and the second is unlikely to support you DOM clean until all requests return in the same order in which they were sent.
One solution is to prevent any API request as long as the other is already waiting.

In JavaScript, because functions are actually executable. Objects can have properties. Therefore, we will add the isBusy property to the DeleteUser function to know when it is already being processed.

 $scope.DeleteUser = function (index) { if(!$scope.DeleteUser.isBusy){ var UserID = $scope.users[id].Id; $scope.DeleteUser.isBusy = true; $http.delete('/api/users/' + UserID).then(function(del) { $scope.users.splice(id,1); $scope.DeleteUser.isBusy = false; }); } } 

EDIT:

Update the code to use .then() on the $http promise object since .success() now deprecated.

Answer 3

Just remove the user from the array:

 // Find index of the user var index = $scope.users.indexOf(id); // Remove user from array $scope.users.splice(index, 1); 

Also, why do you retrieve the user id when you already have it ?:

 $scope.DeleteUser = function (id) { $http.delete('/api/users/' + id).success(function (data) { var index = $scope.users.indexOf(id); $scope.users.splice(index, 1); }); }