How to find and remove an item in source and assign the removed item?

Question

I have an array of objects

a = [
    {name:'java'},
    {name:'ruby'},
    {name:'javascript'},
    {name:'meteor'}
];

in which I would like to find a key/value, remove it from source and assign it to another variable using underscore. I tried _.find, _.findWhere but they do not remove found items.

The question is about finding an item, remove it and return the removed item using underscore.

Possible duplicate of [Remove an item from array using UnderscoreJS](http://stackoverflow.com/questions/16994212/remove-an-item-from-array-using-underscorejs) — Mehdi, Nov 09 '15 at 12:35

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

From the documentation, we have _.findIndex.

findIndex _.findIndex(array, predicate, [context])

Similar to .indexOf, returns the first index where the predicate truth test passes; otherwise returns -1.

Once you have the index of the item in question, you can splice the array at that index and retrieve the 0th index item from the length-1 array returned from Array.prototype.splice.

var sourceArray = [
  {name:'java'},
  {name:'ruby'},
  {name:'javascript'},
  {name:'meteor'}
];

var index = _.findIndex(sourceArray, function(x) {
  return x.name === 'javascript';
});
var item = sourceArray.splice(index, 1)[0];

EDIT: You could also do it with _.findWhere and _.without as shown in mef's answer. It's a bit more inefficient, but also a bit more readable. However, note that it will remove all instances of an object with that key-value pair instead of just the first, so make sure that's the behavior you want.

mmm...can it be accomplished in a single operation, rather than getting index and using it to splice it. — Bala, Nov 09 '15 at 14:02

score 1 · Answer 2 · edited May 23 '17 at 10:27

The linked answer shows how to do it:

var item = _.findWhere(a, {name:'javascript'}) // find item

a = _.without(a, item); // remove the item from the array

var a = [
    {name:'java'},
    {name:'ruby'},
    {name:'javascript'},
    {name:'meteor'}
];

var item = _.findWhere(a, {name:'javascript'})

a = _.without(a, item);

console.log('matched item:', item)
console.log('array a without the item:', a)

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
see output in the console

score 0 · Answer 3 · answered Nov 09 '15 at 12:40

I made an example of a html page that creates 2 arrays of string and 3 buttons 1. Takes the element 'java' of a and puts it on b 2. alert of each element on a 3. alert of each element on b

<html>
<head>

<script>
var a = [
    {name:'java'},
    {name:'ruby'},
    {name:'javascript'},
    {name:'meteor'}
];

var b = [
    {name:'c#'},
    {name:'vb'}
];


function lista(){
  for (var count = 0; count < a.length; count++) {
        alert(a[count].name);
    }
}

function listb(){
  for (var count = 0; count < b.length; count++) {
        alert(b[count].name);
    }
}

function takeOff(str){
    for (var count = 0; count < a.length; count++) {
        if(a[count].name == str){
          b.push(a[count]);
          a.splice(count, 1);
        }
    }
}

</script>
</head>
<body>

<button onclick="takeOff('java');">takeOff 'java'</button>
<button onclick="lista();">list a</button>
<button onclick="listb();">list b</button>

</body>
</html>

Hope this is what you were trying to acheive.

How to find and remove an item in source and assign the removed item?

3 Answers3