Remove array element based on object property
JavascriptJqueryArraysObjectPropertiesJavascript Problem Overview
I have an array of objects like so:
var myArray = [
{field: 'id', operator: 'eq', value: id},
{field: 'cStatus', operator: 'eq', value: cStatus},
{field: 'money', operator: 'eq', value: money}
];
How do I remove a specific one based on its property?
e.g. How would I remove the array object with 'money' as the field property?
Javascript Solutions
Solution 1 - Javascript
One possibility:
myArray = myArray.filter(function( obj ) {
return obj.field !== 'money';
});
Please note that filter
creates a new array. Any other variables referring to the original array would not get the filtered data although you update your original variable myArray
with the new reference. Use with caution.
Solution 2 - Javascript
Iterate through the array, and splice
out the ones you don't want. For easier use, iterate backwards so you don't have to take into account the live nature of the array:
for (var i = myArray.length - 1; i >= 0; --i) {
if (myArray[i].field == "money") {
myArray.splice(i,1);
}
}
Solution 3 - Javascript
Say you want to remove the second object by it's field property.
With ES6 it's as easy as this.
myArray.splice(myArray.findIndex(item => item.field === "cStatus"), 1)
Solution 4 - Javascript
In ES6, just one line.
const arr = arr.filter(item => item.key !== "some value");
:)
Solution 5 - Javascript
You can use lodash's findIndex to get the index of the specific element and then splice using it.
myArray.splice(_.findIndex(myArray, function(item) {
return item.value === 'money';
}), 1);
Update
You can also use ES6's findIndex()
> The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. Otherwise -1 is returned.
const itemToRemoveIndex = myArray.findIndex(function(item) {
return item.field === 'money';
});
// proceed to remove an item only if it exists.
if(itemToRemoveIndex !== -1){
myArray.splice(itemToRemoveIndex, 1);
}
Solution 6 - Javascript
We can remove the element based on the property using the below 2 approaches.
- Using filter method
> testArray.filter(prop => prop.key !== 'Test Value')
- Using splice method. For this method we need to find the index of the propery.
> const index = testArray.findIndex(prop => prop.key === 'Test Value') > testArray.splice(index,1)
Solution 7 - Javascript
Here's another option using jQuery grep. Pass true
as the third parameter to ensure grep removes items that match your function.
users = $.grep(users, function(el, idx) {return el.field == "money"}, true)
If you're already using jQuery then no shim is required, which is could be useful as opposed to using Array.filter
.
Solution 8 - Javascript
var myArray = [
{field: 'id', operator: 'eq', value: id},
{field: 'cStatus', operator: 'eq', value: cStatus},
{field: 'money', operator: 'eq', value: money}
];
console.log(myArray.length); //3
myArray = $.grep(myArray, function(element, index){return element.field == "money"}, true);
console.log(myArray.length); //2
Element is an object in the array.
3rd parameter true
means will return an array of elements which fails your function logic, false
means will return an array of elements which fails your function logic.
Solution 9 - Javascript
Using the lodash library:
var myArray = [
{field: 'id', operator: 'eq', value: 'id'},
{field: 'cStatus', operator: 'eq', value: 'cStatus'},
{field: 'money', operator: 'eq', value: 'money'}
];
var newArray = _.remove(myArray, function(n) {
return n.value === 'money';;
});
console.log('Array');
console.log(myArray);
console.log('New Array');
console.log(newArray);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js"></script>
Solution 10 - Javascript
Based on some comments above below is the code how to remove an object based on a key name and key value
var items = [
{ "id": 3.1, "name": "test 3.1"},
{ "id": 22, "name": "test 3.1" },
{ "id": 23, "name": "changed test 23" }
]
function removeByKey(array, params){
array.some(function(item, index) {
return (array[index][params.key] === params.value) ? !!(array.splice(index, 1)) : false;
});
return array;
}
var removed = removeByKey(items, {
key: 'id',
value: 23
});
console.log(removed);
Solution 11 - Javascript
jAndy's solution is probably best, but if you can't rely on filter you could do something like:
var myArray = [
{field: 'id', operator: 'eq', value: 'id'},
{field: 'cStatus', operator: 'eq', value: 'cStatus'},
{field: 'money', operator: 'eq', value: "money"}
];
myArray.remove_key = function(key){
var i = 0,
keyval = null;
for( ; i < this.length; i++){
if(this[i].field == key){
keyval = this.splice(i, 1);
break;
}
}
return keyval;
}
Solution 12 - Javascript
Following is the code if you are not using jQuery. Demo
var myArray = [
{field: 'id', operator: 'eq', value: 'id'},
{field: 'cStatus', operator: 'eq', value: 'cStatus'},
{field: 'money', operator: 'eq', value: 'money'}
];
alert(myArray.length);
for(var i=0 ; i<myArray.length; i++)
{
if(myArray[i].value=='money')
myArray.splice(i);
}
alert(myArray.length);
You can also use underscore library which have lots of function.
Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support