How to exclude an item from an array by the attribute value?

Question

I got the following array with a few items:

var arr = [
    {id: 1, name: "Jon Snow"}, 
    {id: 2, name: "Michael Scolfield"}, 
    {id: 3, name: "Dexter Morgan"}
];

To add new item the method is used push. Exactly this way:

arr.push({
  id: 1,
  name: "Jon Snow"
})

I realized that it is possible to remove using the method splice() passing the index as parameter. See:

arr.splice(index,1);

But I need to delete an item from array passing as parameter the id, which would be an object attribute. Example:

function removeItem(id){
    //remover o objecto com id específico
}

How to delete an item from a array passing as your parameter id? What would be the best way to do that?

Answer 1

You need to find the element using the method filter, then just capture the element content using indexOf and remove it.

It is also possible to create a new array only with the elements that do not correspond to its exclusion criterion. Note that in this approach the array original is not changed.

var arr = [
    {id: 1, name: 'Duplicado'}, 
    {id: 1, name: 'John Snow'}, 
    {id: 2, name: 'Michael Scolfield'}, 
    {id: 3, name: 'Dexter Morgan'}
];

removerPorId(arr, 1);
arr = removerPorId2(arr, 2);

console.log(arr);

// Opção 1
function removerPorId(array, id) {
  var result = array.filter(function(el) {
    return el.id == id;
  });
    
  for(var elemento of result){
    var index = array.indexOf(elemento);    
    array.splice(index, 1);
  }
}

// Opção 2
function removerPorId2(array, id) {
  return array.filter(function(el) { 
    return el.id !== id; 
  });
}

Answer 2

Utilize filter.

function removeItem(arr, refId) {
    return arr.filter(function(i) { return i.id !== refId; });
};

Answer 3

I advise to use the lib Lodash to manipulate Java Script. This core-only compressed lib is 4kb. Has several features to handle items in javascript, always use in my projects, recommend. ;)

With him it would be so simple:

var arr = [
    {id: 1, name: 'John Snow'},
    {id: 2, name: 'Michael Scolfield'}, 
    {id: 3, name: 'Dexter Morgan'}
];

// Objeto com o Dexter
console.log(arr);

// Remove Dexter
arr.splice(_.findIndex(arr, {id: 3}), 1);

// Objeto sem o Dexter
console.log(arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

Answer 4

There are two ways to do this:

• creating a new array with an element less
• changing the current array

creating a new array with an element less

There are already answers that refer some methods, but the fastest is using a loop for.
(jsPerf test in here)

function filtrar(arr, id) {
  var res = []
  for (var i = 0, j = arr.length; i !== j; i++) {
    if (arr[i].id !== id) res.push(arr[i]);
  }
  return res;
};

var arr = [
    {id: 1, name: 'John Snow'}, 
    {id: 2, name: 'Michael Scolfield'}, 
    {id: 3, name: 'Dexter Morgan'}
];

console.log(filtrar(arr, 1));

changing the current array

function filtrar(arr, id) {

  for (var i = 0, j = arr.length; i !== j; i++) {
    if (arr[i].id === id) break;
  }
  arr.splice(i, 1);
};

var arr = [{
    id: 1,
    name: 'John Snow'
  },
  {
    id: 2,
    name: 'Michael Scolfield'
  },
  {
    id: 3,
    name: 'Dexter Morgan'
  }
];

filtrar(arr, 1);
console.log(arr);