How to Search Object by ID and Remove It from JSON Array In JavaScript

Websolutionstuff | May-26-2021 | Categories : PHP jQuery

In this example we will see how to search object by id and remove it from json array in javascript. we need to add JavaScript function that takes in one such array as the first argument and id string in second argument for search and remove object from json array.

After that this function search for the object by that id, and if the array contains that object, we should remove object from json array in javascript.So, let's learn how to remove object from json array in javascript.

Example : 

const arr = [
   {id: "1", name: "car", type: "vehicle"},
   {id: "2", name: "bike", type: "vehicle"},
   {id: "3", name: "cycle", type: "vehicle"},
   {id: "4", name: "pink", type: "color"},
   {id: "5", name: "blue", type: "color"},
   {id: "6", name: "red", type: "color"},

];

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);

 

Output :

[
   {id: "1", name: "car", type: "vehicle"},
   {id: "2", name: "bike", type: "vehicle"},
   {id: "3", name: "cycle", type: "vehicle"},
   {id: "4", name: "pink", type: "color"},
   {id: "6", name: "red", type: "color"},

]

 

Recommended Post
Featured Post
Laravel 9 Resize Image Before Upload
Laravel 9 Resize Image Before...

In this article, we will see how to resize image before uploading in laravel 9. we will install the intervention/im...

Read More

Jun-15-2022

Login with Mobile Number using Laravel Custom Auth
Login with Mobile Number using...

In this tutorial i will show you how to login with mobile number in laravel using Laravel Custom Auth , laravel pro...

Read More

Jun-18-2021

Laravel 9 Livewire CRUD Operation
Laravel 9 Livewire CRUD Operat...

In this article, we will see the laravel 9 livewire crud operation. we will learn about livewire crud operation in larav...

Read More

Nov-24-2022

How To Drop Foreign Key In Laravel 10 Migration
How To Drop Foreign Key In Lar...

In this article, we will explore the process of removing foreign key constraints in Laravel 10 migrations. We will delve...

Read More

Apr-28-2023