Search by id and remove object from JSON array in JavaScript

Suppose, we have an array of objects that contains data about some movies like this ?

const arr = [
   {id: "1", name: "Snatch", type: "crime"},
   {id: "2", name: "Witches of Eastwick", type: "comedy"},
   {id: "3", name: "X-Men", type: "action"},
   {id: "4", name: "Ordinary People", type: "drama"},
   {id: "5", name: "Billy Elliot", type: "drama"},
   {id: "6", name: "Toy Story", type: "children"}
];

We are required to write a JavaScript function that takes in one such array as the first argument and an id string as the second argument. Then our function should search for the object by that id, and if the array contains that object, we should remove it from the array.

Using findIndex() and splice()

The most efficient approach is to use findIndex() to locate the object and splice() to remove it from the original array.

const arr = [
   {id: "1", name: "Snatch", type: "crime"},
   {id: "2", name: "Witches of Eastwick", type: "comedy"},
   {id: "3", name: "X-Men", type: "action"},
   {id: "4", name: "Ordinary People", type: "drama"},
   {id: "5", name: "Billy Elliot", type: "drama"},
   {id: "6", name: "Toy Story", type: "children"}
];

const removeById = (arr, id) => {
   const requiredIndex = arr.findIndex(el => {
      return el.id === String(id);
   });
   if(requiredIndex === -1){
      return false;
   };
   return !!arr.splice(requiredIndex, 1);
};

removeById(arr, 5);
console.log(arr);

[
   { id: '1', name: 'Snatch', type: 'crime' },
   { id: '2', name: 'Witches of Eastwick', type: 'comedy' },
   { id: '3', name: 'X-Men', type: 'action' },
   { id: '4', name: 'Ordinary People', type: 'drama' },
   { id: '6', name: 'Toy Story', type: 'children' }
]

Using filter() Method

Alternatively, you can use the filter() method to create a new array without the matching object:

const movies = [
   {id: "1", name: "Snatch", type: "crime"},
   {id: "2", name: "Witches of Eastwick", type: "comedy"},
   {id: "3", name: "X-Men", type: "action"},
   {id: "4", name: "Ordinary People", type: "drama"}
];

const removeByIdFilter = (arr, id) => {
   return arr.filter(item => item.id !== String(id));
};

const updatedMovies = removeByIdFilter(movies, "2");
console.log(updatedMovies);

[
   { id: '1', name: 'Snatch', type: 'crime' },
   { id: '3', name: 'X-Men', type: 'action' },
   { id: '4', name: 'Ordinary People', type: 'drama' }
]

Comparison

Conclusion

Use findIndex() with splice() to modify the original array, or filter() to create a new array without the target object. Both methods handle string/number id conversion safely.