var listToDelete = ['abc', 'efg'];
var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me
{id:'efg',name:'em'}, // delete me
{id:'hij',name:'ge'}] // all that should remain
How do I remove an object from the array by matching object property?
Only native JavaScript please.
I am having trouble using splice because length diminishes with each deletion. Using clone and splicing on orignal index still leaves you with the problem of diminishing length.
asked May 10, 2013 at 22:36
Dan KanzeDan Kanze
18.4k28 gold badges80 silver badges133 bronze badges
3
I assume you used splice something like this?
for [var i = 0; i < arrayOfObjects.length; i++] {
var obj = arrayOfObjects[i];
if [listToDelete.indexOf[obj.id] !== -1] {
arrayOfObjects.splice[i, 1];
}
}
All you need to do to fix the bug is decrement i for the next time around, then [and looping backwards is also an option]:
for [var i = 0; i < arrayOfObjects.length; i++] {
var obj = arrayOfObjects[i];
if [listToDelete.indexOf[obj.id] !== -1] {
arrayOfObjects.splice[i, 1];
i--;
}
}To avoid linear-time deletions, you can write array elements you want to keep over the array:
var end = 0;
for [var i = 0; i < arrayOfObjects.length; i++] {
var obj = arrayOfObjects[i];
if [listToDelete.indexOf[obj.id] === -1] {
arrayOfObjects[end++] = obj;
}
}
arrayOfObjects.length = end;
and to avoid linear-time lookups in a modern runtime, you can use a hash set:
const setToDelete = new Set[listToDelete];
let end = 0;
for [let i = 0; i < arrayOfObjects.length; i++] {
const obj = arrayOfObjects[i];
if [setToDelete.has[obj.id]] {
arrayOfObjects[end++] = obj;
}
}
arrayOfObjects.length = end;
which can be wrapped up in a nice function:
const filterInPlace = [array, predicate] => {
let end = 0;
for [let i = 0; i < array.length; i++] {
const obj = array[i];
if [predicate[obj]] {
array[end++] = obj;
}
}
array.length = end;
};
const toDelete = new Set[['abc', 'efg']];
const arrayOfObjects = [{id: 'abc', name: 'oh'},
{id: 'efg', name: 'em'},
{id: 'hij', name: 'ge'}];
filterInPlace[arrayOfObjects, obj => !toDelete.has[obj.id]];
console.log[arrayOfObjects];If you don’t need to do it in place, that’s Array#filter:
const toDelete = new Set[['abc', 'efg']];
const newArray = arrayOfObjects.filter[obj => !toDelete.has[obj.id]];
answered May 10, 2013 at 22:39
Ry-♦Ry-
211k54 gold badges441 silver badges455 bronze badges
0
You can remove an item by one of its properties without using any 3rd party libs like this:
var removeIndex = array.map[item => item.id].indexOf["abc"];
~removeIndex && array.splice[removeIndex, 1];
biberman
4,9054 gold badges10 silver badges34 bronze badges
answered Oct 12, 2014 at 16:22
parliamentparliament
20.6k37 gold badges142 silver badges233 bronze badges
4
With lodash/underscore:
If you want to modify the existing array itself, then we have to use splice. Here is the little better/readable way using findWhere of underscore/lodash:
var items= [{id:'abc',name:'oh'}, // delete me
{id:'efg',name:'em'},
{id:'hij',name:'ge'}];
items.splice[_.indexOf[items, _.findWhere[items, { id : "abc"}]], 1];
With ES5 or higher
[without lodash/underscore]
With ES5 onwards we have findIndex method on array, so its easier without lodash/underscore
items.splice[items.findIndex[function[i]{
return i.id === "abc";
}], 1];
[ES5 is supported in almost all morden browsers]
About findIndex, and its Browser compatibility
answered Mar 12, 2014 at 16:01
Rahul R.Rahul R.
5,4393 gold badges26 silver badges36 bronze badges
11
To delete an object by it's id in given array;
const hero = [{'id' : 1, 'name' : 'hero1'}, {'id': 2, 'name' : 'hero2'}];
//remove hero1
const updatedHero = hero.filter[item => item.id !== 1];
answered Apr 12, 2019 at 9:12
1
findIndex works for modern browsers:
var myArr = [{id:'a'},{id:'myid'},{id:'c'}];
var index = myArr.findIndex[function[o]{
return o.id === 'myid';
}]
if [index !== -1] myArr.splice[index, 1];
Bouh
1,2222 gold badges8 silver badges22 bronze badges
answered Aug 25, 2016 at 5:16
3
Check this out using Set and ES5 filter.
let result = arrayOfObjects.filter[ el => [-1 == listToDelete.indexOf[el.id]] ];
console.log[result];
Here is JsFiddle: //jsfiddle.net/jsq0a0p1/1/
nCardot
4,9093 gold badges37 silver badges74 bronze badges
answered May 23, 2018 at 9:04
0
If you just want to remove it from the existing array and not create a new one, try:
var items = [{Id: 1},{Id: 2},{Id: 3}];
items.splice[_.indexOf[items, _.find[items, function [item] { return item.Id === 2; }]], 1];
answered Aug 21, 2013 at 19:32
2
Loop in reverse by decrementing i to avoid the problem:
for [var i = arrayOfObjects.length - 1; i >= 0; i--] {
var obj = arrayOfObjects[i];
if [listToDelete.indexOf[obj.id] !== -1] {
arrayOfObjects.splice[i, 1];
}
}
Or use filter:
var newArray = arrayOfObjects.filter[function[obj] {
return listToDelete.indexOf[obj.id] === -1;
}];
answered Jun 11, 2014 at 23:11
Felix RabeFelix Rabe
4,0964 gold badges23 silver badges34 bronze badges
Only native JavaScript please.
As an alternative, more "functional" solution, working on ECMAScript 5, you could use:
var listToDelete = ['abc', 'efg'];
var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me
{id:'efg',name:'em'}, // delete me
{id:'hij',name:'ge'}]; // all that should remain
arrayOfObjects.reduceRight[function[acc, obj, idx] {
if [listToDelete.indexOf[obj.id] > -1]
arrayOfObjects.splice[idx,1];
}, 0]; // initial value set to avoid issues with the first item and
// when the array is empty.
console.log[arrayOfObjects];
[ { id: 'hij', name: 'ge' } ]
According to the definition of 'Array.prototype.reduceRight' in ECMA-262:
reduceRight does not directly mutate the object on which it is called but the object may be mutated by the calls to callbackfn.
So this is a valid usage of reduceRight.
answered Jan 7, 2016 at 21:21
Sylvain LerouxSylvain Leroux
47.8k6 gold badges97 silver badges118 bronze badges
var arrayOfObjects = [{id:'abc',name:'oh'}, // delete me
{id:'efg',name:'em'}, // delete me
{id:'hij',name:'ge'}] // all that should remain
as per your answer will be like this. when you click some particular object send the index in the param for the delete me function. This simple code will work like charm.
function deleteme[i]{
if [i > -1] {
arrayOfObjects.splice[i, 1];
}
}
answered Nov 25, 2017 at 8:03
0
If you like short and self descriptive parameters or if you don't want to use splice and go with a
straight forward filter or if you are simply a SQL person like me:
function removeFromArrayOfHash[p_array_of_hash, p_key, p_value_to_remove]{
return p_array_of_hash.filter[[l_cur_row] => {return l_cur_row[p_key] != p_value_to_remove}];
}
And a sample usage:
l_test_arr =
[
{
post_id: 1,
post_content: "Hey I am the first hash with id 1"
},
{
post_id: 2,
post_content: "This is item 2"
},
{
post_id: 1,
post_content: "And I am the second hash with id 1"
},
{
post_id: 3,
post_content: "This is item 3"
},
];
l_test_arr = removeFromArrayOfHash[l_test_arr, "post_id", 2]; // gives both of the post_id 1 hashes and the post_id 3
l_test_arr = removeFromArrayOfHash[l_test_arr, "post_id", 1]; // gives only post_id 3 [since 1 was removed in previous line]
answered Jun 20, 2017 at 16:36
with filter & indexOf
withLodash = _.filter[arrayOfObjects, [obj] => [listToDelete.indexOf[obj.id] === -1]];
withoutLodash = arrayOfObjects.filter[obj => listToDelete.indexOf[obj.id] === -1];
with filter & includes
withLodash = _.filter[arrayOfObjects, [obj] => [!listToDelete.includes[obj.id]]]
withoutLodash = arrayOfObjects.filter[obj => !listToDelete.includes[obj.id]];
answered Aug 24, 2018 at 15:47
user3437231user3437231
2524 silver badges5 bronze badges
You can use filter. This method always returns the element if the condition is true. So if you want to remove by id you must keep all the element that doesn't match with the given id. Here is an example:
arrayOfObjects = arrayOfObjects.filter[obj => obj.id != idToRemove]
answered Apr 2, 2020 at 21:07
A very short and simple way is:
for [i = 0; i < listToDelete.length; i++] {
arrayOfObjects = arrayOfObjects.filter[[e] => e.id !== listToDelete[i]]
}
answered Jul 25 at 9:01