Remove an object from array by value in Javascript

Remove an object from array by value in Javascript

To remove the object from an array using the key value:

1. Create an array of objects.
2. Find the index of the object that needs to be removed using array.findIndex() function.
3. Remove the object using array.splice() function.

# Method 1: Using Array.findIndex() and Array.splice() function

As described above we can remove the object from value using array.findIndex() and splice() function. Here, we find the index of the object that needs to be deleted using the findIndex() function and then remove it using the splice() function.

// define an array of objects
const students = [
    { id: 1, name: "Robin" },
    { id: 2, name: "Miller" },
    { id: 3, name: "John Deo" },
    { id: 4, name: "Troy" }
];

// find index of object which has id - 3
const index = students.findIndex(el => el.id === 3);

// remove the object
if (index >= 0) {
    students.splice(index, 1);
}

console.log(students);

Output

[
    {"id":1,"name":"Robin"},
    {"id":2,"name":"Miller"},
    {"id":4,"name":"Troy"}
]

Live Demo

The code defines an array of objects representing students. It then finds the index of the object in the array which has an id of 3. Finally, it removes the object from the array.

# Method 2: Using filter() function

As we know that we can use the filter() function to filter the data based on key values. We can also use this method to filter out the object from the array.

let students = [
    { id: 1, name: "Robin" },
    { id: 2, name: "Miller" },
    { id: 3, name: "John Deo" },
    { id: 4, name: "Troy" }
];

students = students.filter( item => item.id !== 3 );

console.log(students);

Output

[
   {"id":1,"name":"Robin"},
   {"id":2,"name":"Miller"},
   {"id":4,"name":"Troy"}
]

Live Demo

The above code example is using the filter method on an array of objects. The filter method returns a new array with all elements that pass the condition provided in the callback function.

In this case, the condition is that the id property of the object is not equal to 3. So, the resulting array will not contain the object with id equal to 3.

# Method 3: Using for loop

We can also use Javascript for loop to remove an object from an array by value. We will iterate over the array and in each iteration, we will check if the object key value matches the value of the object that needs to be removed.

let students = [
    { id: 1, name: "Robin" },
    { id: 2, name: "Miller" },
    { id: 3, name: "John Deo" },
    { id: 4, name: "Troy" }
];

for (var i = 0; i < students.length; i++) {
    if (students[i].id === 3) {
        students.splice(i, 1);
        break;
    }
}

console.log(students);

Output

[
   {"id":1,"name":"Robin"},
   {"id":2,"name":"Miller"},
   {"id":4,"name":"Troy"}
]

Live Demo

This code uses a for loop to iterate through the students array. If the id of the student at the current index is equal to 3, the student is removed from the array using the splice() method.

The loop is then broken so that the remaining students in the array are not checked.

# Method 4: Using spread operator(...) and findIndex()

If you are using ES6 then you can also use the spread operator(...) and findIndex() function to remove the object from the array by value.

let students = [
    { id: 1, name: "Robin" },
    { id: 2, name: "Miller" },
    { id: 3, name: "John Deo" },
    { id: 4, name: "Troy" }
];

const index = students.findIndex(item => item.id === 3);
const result = [
    ...students.slice(0, index),
    ...students.slice(index + 1)
]

console.log(result);

Output

[
   {"id":1,"name":"Robin"},
   {"id":2,"name":"Miller"},
   {"id":4,"name":"Troy"}
]

Live Demo

The code example is using the findIndex() and slice() methods to remove an object from the students named array. The findIndex() method is used to find the index of the object with an id of 3 and the slice() method is used to create a new array that excludes that object.

Conclusion

These were some methods that can be helpful to delete or remove the object from an array using value. We have tried to explain every method than is possible in order to do that. If you know more methods that can be helpful to remove the object. Please contribute and share your code.