How to remove object from array of objects using JavaScript ? - GeeksforGeeks

31 Dec, 2019
Given a JavaScript array containing objects in and the task is to delete certain objects from array of objects. There are two approaches to solve this problem which are discussed below:
Approach 1:
Use array.forEach() method to traverse every object of the array.
For each object use delete obj.property to delete the certain object element from array of objects.
Example: This example implements the above approach.
<!DOCTYPE HTML><html>  <head>    <title>        Remove certain property for all objects        in array with JavaScript.    </title></head>  <body style="text-align:center;">    <h1 style="color: green">          GeeksForGeeks      </h1>    <p id="GFG_UP"></p>      <button onclick="gfg_Run()">        Click Here    </button>    <p id="GFG_DOWN"        style="color:green;">    </p>    <script>        var el_up = document.getElementById("GFG_UP");        var el_down = document.getElementById("GFG_DOWN");        var arr = [{            a: 'Val_1',            b: 'Val_2'        }, {            a: 'Val_3',            b: 'Val_4'        }, {            a: 'Val_1',            b: 'Val_2'        }];        el_up.innerHTML = "Click on the button to delete"            + " certain property of object.<br>Array - "            + JSON.stringify(arr);          function gfg_Run() {            arr.forEach(function(obj) {                delete obj.a            });            el_down.innerHTML = JSON.stringify(arr);        }    </script></body>  </html>
Output:
Before clicking the button:
After clicking the button:
Approach 2:
Use array.map() method to traverse every object of the array.
For each object use delete obj.property to delete the certain object from array of objects.
Example: This example implements the above approach.
<!DOCTYPE HTML><html>  <head>    <title>        Remove certain property for all        objects in array with JavaScript.    </title></head>  <body style="text-align:center;">    <h1 style="color: green">          GeeksForGeeks      </h1>    <p id="GFG_UP"></p>      <button onclick="gfg_Run()">        Click Here    </button>    <p id="GFG_DOWN"></p>      <script>        var el_up = document.getElementById("GFG_UP");        var el_down = document.getElementById("GFG_DOWN");        var arr = [{            a: 'Val_1',            b: 'Val_2'        }, {            a: 'Val_3',            b: 'Val_4'        }, {            a: 'Val_1',            b: 'Val_2'        }];        el_up.innerHTML = "Click on the button to delete"            + " certain property of object.<br>Array - "            + JSON.stringify(arr);          function gfg_Run() {            arr.map(function(obj) {                delete obj.a;                return obj;            });            el_down.innerHTML = JSON.stringify(arr);        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
JavaScript-Misc
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript