Using .splice to remove an item from an array is removing multiple objects

Question

I have created a page where users can select/ unselect employees. I am using .push to add these employees to an array, users. I am also using .splice to remove the unchecked item from the array. Currently, unchecking the last checked item works fine, however, if I select multiple items and uncheck the first item displayed in the view, it will remove every item from the array.

Here is the HTML:

<div ng-app="myApp">
  <div ng-controller="MainCtrl">
    <table>
      <tr ng-repeat="user in users">
        <td><input type="checkbox" ng-model="checked" ng-change="addremoveuser(checked, user.ID)"><td>
        <td>{{user.Title}}</td>
        <td>{{user.FirstName}}</td>
        <td>{{user.LastName}}</td>
      </tr>
    </table>
  </div>
</div>

Here is the JS:

var app = angular.module('myApp', ['ngSanitize']);
app.controller('MainCtrl', function($scope, $http, $q){
    var users = [];
    $scope.addremoveuser = function (checked, id) {
        if (checked) {
            console.log("user selected", id);
            users.push(id)
            console.log("if test", users);
        }
        else {
            console.log("user unselected", id);
            var index = users.indexOf(id);
            users.splice(index);
            console.log("else test", users);
        }
    };
});

How can I fix this to only remove the item that was unchecked?

pass $index instead addremoveuser(checked, $index) -> users.splice(id); — Aleksey Solovey
– Aleksey Solovey, Commented Jan 18, 2018 at 14:40

CodeSmith · Accepted Answer · 2018-01-18 14:48:03Z

3

users.splice(index);

should be:

users.splice(index, 1);

Look at documentation:

Array.splice()

Also, take care what id is. Is it an ill named element or actual id of element in array? Cause if its id of element in array you don't need that indexOf(id).

edited Jan 18, 2018 at 14:48

answered Jan 18, 2018 at 14:43

CodeSmith

3,2171 gold badge19 silver badges34 bronze badges

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

Comments

Mike Tung · Accepted Answer · 2018-01-18 14:45:02Z

0

It's a bit dangerous to splice and mutate your array. One strategy to help with adding/removing users is to simply use filter.

var users = [];
$scope.addremoveuser = function (checked, id) {
    if (checked) {
        console.log("user selected", id);
        users.push(id)
        console.log("if test", users);
    }
    else {
        console.log("user unselected", id);
        users = users.filter(function(user) {
          return user.id === id;
        }
        console.log("else test", users);
    }

answered Jan 18, 2018 at 14:45

Mike Tung

4,8411 gold badge19 silver badges25 bronze badges

Collectives™ on Stack Overflow

Using .splice to remove an item from an array is removing multiple objects

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related