How to remove the element with respect to array key?

Question

I have an javascript array as below:

$scope.products = [
    {id:'1', name:'IPhone6', price: '1,000 AED', quantity: '2'},
    {id:'2', name:'Samsung Mini', price: '750 AED', quantity: '1'},
    {id:'3', name:'Dell Laptop', price: '1700 AED', quantity: '3'},
    {id:'4', name:'HCL Monitor 7"', price: '650 AED', quantity: '7'},
];

Displaying above array using ng-repeat Angular js function.

I am calling a remove function and passing id as argument. How can I remove the particular element from the array?

$scope.products.slice($id, 1) is not required. I have to delete with respect to id? Please advice.

so you want to, for example remove product with an id of 3 etc from the array? you'd want splice() — atmd, Jan 05 '15 at 13:15
Is `id` always sequential, and always greater than the index by 1? Is there any chance that different lines have the same id? — k.abbey, Jan 05 '15 at 13:23

score 2 · Answer 1 · answered Jan 05 '15 at 13:16

2

This should work:

// id = '3'

$scope.products = $scope.products.filter(function (p) { return p.id !== id });

answered Jan 05 '15 at 13:16

lante

7,192
4
37
57

divyenduz · Answer 2 · 2015-01-05T13:46:20.200

1

Checkout the splice method

You might want to pass the index of the element with id you supply to the remove function, to do that you can describe a getIndexBy function

Array.prototype.getIndexBy = function (name, value) {
    for (var i = 0; i < this.length; i++) {
        if (this[i][name] == value) {
            return i;
        }
    }
}

And use it like

index=products.getIndexBy("id", 3)

where 3 is the id you supplied. Then you can use this index in the splice method to delete the specific element.

Assuming that you are looking to take down a element by index.

edited Jan 05 '15 at 13:46

answered Jan 05 '15 at 13:15

divyenduz

2,037
19
38

Explain how to use the `splice` method with the problem described above – lante Jan 05 '15 at 13:20
Please checkout how is splice used to remove items - http://jsbin.com/vesomu/2/edit?html,js,output – divyenduz Jan 05 '15 at 13:23
@lante : I guess that is fine right ? not worthy of a -1 at least – divyenduz Jan 05 '15 at 13:33
You are only exposing two links to MDN and W3S, but you are not explaining how to implement that methods as a solution to solve the problem described. Also you are not reading the question, because you are requiring an index, and the question says that it needs to pass an `id` – lante Jan 05 '15 at 13:37
Thanks for pointing out. I have edited the answer adding more details. thanks – divyenduz Jan 05 '15 at 13:46

score 1 · Answer 3 · edited May 23 '17 at 12:06

You could define a utility function:

(function(window) {
      var utility = window.utility|| (window.utility= {});
      function remove(items, fn) {           
           var toRemove = [];          
           angular.forEach(items, function(item, i) {  
               if (fn(item)) {
                  toRemove.push(i);
               }
            });
            angular.forEach(toRemove, function(index) {
                items.splice(index,1);
            });
      }

     angular.extend(utility, {
         'remove': remove
     });

})(window);

To use this function, pass an array of items as the first parameter, and a predicate function as a second parameter. All items where the predicate returns true, will remove the item from the array:

Examples:

To remove all users with the name 'john':

utility.remove($scope.users, function(user) {
    return user.name == 'john';
});

To remove a user with id 3:

utility.remove($scope.users, function(user) {
    return user.id == 3;
});

score 1 · Answer 4 · answered Jan 05 '15 at 13:54

Use $index in click action like this

ng-click='slice($index);'

and your function like this

$scope.slice = function(element){
    $scope.friends.splice(element, 1);
}

Or go through this example:

HTML code

<ul>
   <li ng-repeat="product in products" ng-click='slice($index);'>
      [{{$index + 1}}] {{product.name}}
    </li>
</ul>

Javascript code

$scope.products = [
                    {id:'1', name:'IPhone6', price: '1,000 AED', quantity: '2'},
                    {id:'2', name:'Samsung Mini', price: '750 AED', quantity: '1'},
                    {id:'3', name:'Dell Laptop', price: '1700 AED', quantity: '3'},
                    {id:'4', name:'HCL Monitor 7"', price: '650 AED', quantity: '7'},
                  ];

$scope.slice = function(element){
     $scope.friends.splice(element, 1);
}

How to remove the element with respect to array key?

4 Answers4