Remove Array Element Based on Object Property in JavaScript
Last Updated :
15 Jan, 2025
Here are the several methods that can be used to remove array elements based on object property in JavaScript
1. Using the filter() method
The filter() method is useful if you want to preserve the original array and create a new one without the element(s) you want to remove.
JavaScript
let a = [{ id: 1, name: 'Aahana' },{ id: 2, name: 'Neha' },{ id: 3, name: 'Charu' }];
let up = a.filter(a => a.id !== 2);
console.log(up);
Output[ { id: 1, name: 'Aahana' }, { id: 3, name: 'Charu' } ]
In this example
- Input Array: people(a) contains objects with id and name properties.
- Filter Method: The filter() method creates a new array, including only objects where person.id is not 2.
2. Using splice() method
The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
JavaScript
let a = [{ id: 1, name: 'Aahan' }, { id: 2, name: 'Neha' }, { id: 3, name: 'Charu' }];
let rem = a.findIndex(a => a.id === 2);
if (rem !== -1) {
a.splice(rem, 1);
}
console.log(a);
Output[ { id: 1, name: 'Aahan' }, { id: 3, name: 'Charu' } ]
In this example
- findIndex(): Finds the index of the object where id === 2. If found, it returns the index; otherwise, it returns -1.
- Condition: Checks if the index is valid (!== -1).
- splice(): Removes the element at the found index directly from the original array.
3. forEach()
The forEach() method executes a provided function once for each array element.
JavaScript
let a = [{id: 1,name: 'Luvkush'}, {id: 2, name: 'Jenni'},{id: 3,name: 'Daya'}];
for (let i = 0; i < a.length; i++) {
if (a[i].id === 2) {
a.splice(i, 1);
i--;
}
}
console.log(a);
Output[ { id: 1, name: 'Luvkush' }, { id: 3, name: 'Daya' } ]
In this example
- The code removes the object with id: 2 from the array using a loop and splice, adjusting the index with i-- to avoid skipping elements.
4. Using reduce() method
The reduce() method in JavaScript processes an array to produce a single output by applying a callback function to each element.
JavaScript
let arr = [{ id: 1, name: 'Tanu' }, { id: 2, name: 'Jayant' }, { id: 3, name: 'Riya' },];
let id = 2;
arr = arr.reduce((acc, item) => {
if (item.id !== id) {
acc.push(item);
}
return acc;
}, []);
console.log(arr);
Output[ { id: 1, name: 'Tanu' }, { id: 3, name: 'Riya' } ]
In this example
- The code removes an object with id = 2 from the array using the reduce() method.
- It iterates through the array, pushing only the objects that don’t match the specified id into a new array, which becomes the updated arr.
5. Using findIndex() Method with splice()
The findIndex() method is used to locate the index of the element that matches the specific property value. Once the index is found, we use the splice() method to remove the element from the array.
JavaScript
let a = [{ id: 1, name: 'Jaya' },{ id: 2, name: 'Raha' },{ id: 3, name: 'Daya' }];
const id = 2;
const index = a.findIndex(element => element.id === id);
if (index !== -1) {
a.splice(index, 1);
}
console.log(a);
Output[ { id: 1, name: 'Jaya' }, { id: 3, name: 'Daya' } ]
In this example
- The code removes the object with id = 2 from the array.
- It uses findIndex() to locate the index of the matching object and, if found (index !== -1), removes it using splice().
6. Using map() method
The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.
JavaScript
let a = [{ id: 1, name: 'Jaya' },{ id: 2, name: 'Jenni' },{ id: 3, name: 'Bhavya' },];
const id = 2;
a = a.map(item => {
return item.id !== id ? item : null;
}).filter(item => item !== null);
console.log(a);
Output[ { id: 1, name: 'Jaya' }, { id: 3, name: 'Bhavya' } ]
In this example
- The code removes the object with id = 2 from the array.
- It uses map() to replace the matching object with null, then filters out null values using filter(), leaving the remaining objects in the array.
Similar Reads
How to Remove a Property From JavaScript Object? The delete operator is used to remove a property from a JavaScript object. The delete operator allows you to remove a specified property from an object. Once a property is deleted, it no longer exists in the object.Using delete OperatorThe basic method to remove a property from a JavaScript object i
3 min read
How to Remove a Property from All Objects in an Array in JavaScript? To remove a property from all objects in an array in JavaScript, you can use the forEach() method to iterate over each object in the array and use the delete operator to remove the specified property.Example:JavaScriptconst arrayOfObjects = [ { name: "Alice", age: 25, city: "New York" }, { name: "Bo
2 min read
How to add and remove properties from objects in JavaScript ? We will try to understand how to add properties to an object and how to add or remove properties from an object in JavaScript.Before we go and see the addition and removal of properties from an object let us first understand the basics of an object in JavaScript.Object:An object in JavaScript is a c
6 min read
How to Filter an Array of Objects Based on Multiple Properties in JavaScript ? Filtering an array of objects based on multiple properties is a common task in JavaScript. It allows us to selectively extract items from an array that satisfy specific conditions. We will explore different approaches to achieve this task.These are the following approaches:Table of ContentUsing the
6 min read
JavaScript Get the index of an object by its property Given an object, the task is to get the object's index from the array of objects of the given property name and property value using JavaScript. we're going to discuss a few techniques. Below are the following approaches: Table of Content Using Array map() MethodUsing for loopUsing findIndex() Metho
3 min read
How to get property descriptors of an object in JavaScript ? Here, we are going to discuss the property descriptors of an Object in JavaScript. The Object.getOwnPropertyDescriptor() method returns an object describing a specific property on a given object. A JavaScript object can be created in many ways and its properties can be called by using property descr
2 min read
How to read properties of an Object in JavaScript ? Objects in JavaScript, it is the most important data type and forms the building blocks for modern JavaScript. These objects are quite different from JavaScriptâs primitive data-types(Number, String, Boolean, null, undefined, and symbol) in the sense that these primitive data-types all store a singl
2 min read
How to Detect an Undefined Object Property in JavaScript ? Detecting an undefined object property is the process of determining whether an object contains a certain property, and if it does, whether the value of that property is undefined. This is an important concept in JavaScript programming, as it helps to prevent errors that can occur when attempting to
3 min read
How to remove Objects from Associative Array in JavaScript ? In this article, we are going to learn about removing Objects from Associative Array in Javascript, In JavaScript, you can remove objects from an associative array (also known as an object) using the following methods. Table of Content Using JavaScript delete operatorUsing JavaScript Array.filter()
4 min read
How to get a subset of a javascript object's properties? To get the subset of properties of a JavaScript Object, we make use of destructuring and Property Shorthand. The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.Syntax: subset = (({a,
2 min read