Displaying Results of Add/ Delete operation dynamically in HTML using ANGULAR JS and Spring MVC

Question

I am having an employee form where the user can add the employee details,search for employee details and delete those details . I have written separate functions for add,search and delete operations inside the controller . Whenever the user adds an employee / deletes an employee . I want the result list to be updated dynamically (Added employee should be shown on result list, deleted employee should not be shown on result list ). How can I achieve this . for example after the delete operation response is successful , should I call the search function again ? .Is there any other way to do these . I am using Angular JS and Spring MVC

This is my Controller Code for Search

$http.post('http://localhost:8080/services/employee/search/'+Systems+"", searchCriteria)
.then(function(response) {
   $scope.searchresponse= [];
   $scope.searchresponse = response.data.items;
   if (response.data && response.data.items.length != 0) {
        $scope.searchresponse = response.data.items.map(function (x) {
            x.selected = false;
            return x;
        });
        console.log($scope.searchresponse);
   } 
   else {
        $scope.showerror = true;
        $scope.ErrorMsg ="There is no record matching your criteria."
   }
});

This is my search Response From API

{
    "items": [{
       "employeeId": "ABC",
       "type": "D",
       "alive": "Yes"
    }, {
       "employeeId": "DEF",
       "type": "A",
       "alive": "Yes"
    }],
    "more": false
}  

This is my Controller call for Delete

 var data1=["ABC", "NPK"];
$http.delete('http://localhost:8080/services/employee/delete/'+Systems+"", {data:{"idList":data1},headers: {'Content-Type': 'application/json'}} )
.then(function(response) {
console.log("testing");
// - here i would like to implement code to remove all the fields that belong to eomployee id ABC,NPK from result page  
        });

I am using selectall/deselect all checkbox to give user option to remove multiple items

Answer 1

Let's suppose your employee has name and id properties, and you have some http resource uri to identify an employee, e.g.

http://youservice/employees/123 

and a service to delete him/her.

In your view, you display the employee list as

<ul>
   <li ng-repeat="employee in employeeList track by employee.id">  
      {{employee.name}} <button ng-click="deleteEmployee(employee.id)">delete</button>
   </li>
</ul>

In your controller, the function called when the user press the delete button on an employee can be

$scope.employeeList = [...];

$scope.deleteEmployee = function(employeeId) {
    let empUri = 'http://youservice/employees/'+employeeId;
    $http.delete(empUri).then(function(response) {
       // delete is successful, remove employee from the list 
       let empIndex = $scope.employeeList.findIndex(e => e.id === employeeId);
       $scope.employeeList.splice(empIndex, 1);
    }, function(responseError) {
       // delete is in error. Display an alert...
    });
}

The list shall be refreshed in the view.

---

UPDATE
In order to remove several employees from the search result, you can just filter the search list, e.g (from your code):

var data1=["ABC", "NPK"];
$http.delete(/* delete service url and data */).then(function(response) {
    // Filter out employees from data1  
    let empList = $scope.searchresponse.filter(emp => {
        // Is emp not in data1 ?
        return !data1.some(remEmpId => remEmpId == emp.employeeId);
    });
    $scope.searchresponse = empList;
});

Answer 2

Use Array.splice to remove data from the response List

for (var i = 0; i < $scope.employeeList.length; i++) {
  if ($scope.employeeList[i].employeeId == employeeId) {
    $scope.employeeList.splice(i, 1);
    break;
  }
}

Have a look at DEMO

Hope this Helps!!!