JavaScript | Remove a JSON attribute
The task is to remove a JSON attribute from the JSON object. To do so, Here are few of the mostly used techniques discussed.
First delete property need to be discussed.
- Delete property
This keyword deletes a property from an object:- This keyword deletes both the value of the property and the property itself.
- After deletion, the property is not available for use before it is added back again.
- This operator is created to be used on object properties, not on variables or functions.
- This operator should not be used on predefined JavaScript object properties. It can crash your application.
Syntax:
delete object.property or delete object['property']
Parameters:
- object: It specifies the name of an object, or an expression evaluating to an object.
- property: .It specifies the property to delete.
Return value:
It returns true for all cases and returns false when the property is an own non-configurable property.
Example 1: This example deletes the prop_12 from the myObj object via var key by using delete property.
<!DOCTYPE HTML><html> <head> <title> JavaScript | Remove a JSON attribute. </title></head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 16px; font-weight: bold;"> </p> <button onclick="gfg_Run()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var myObj = { 'prop_1': { 'prop_11': 'value_11', 'prop_12': 'value_12' } }; el_up.innerHTML = JSON.stringify(myObj); function gfg_Run() { var key = "prop_12"; delete myObj.prop_1[key]; el_down.innerHTML = JSON.stringify(myObj); } </script></body> </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Example 2: This example deletes the prop_11 from the myObj object by using delete property.
<!DOCTYPE HTML><html> <head> <title> JavaScript | Remove a JSON attribute. </title></head> <body style="text-align:center;" id="body"> <h1 style="color:green;"> GeeksForGeeks </h1> <p id="GFG_UP" style="font-size: 16px; font-weight: bold;"> </p> <button onclick="gfg_Run()"> Click here </button> <p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;"> </p> <script> var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var myObj = { 'prop_1': { 'prop_11': 'value_11', 'prop_12': 'value_12' } }; el_up.innerHTML = JSON.stringify(myObj); function gfg_Run() { delete myObj.prop_1.prop_11; el_down.innerHTML = JSON.stringify(myObj); } </script></body> </html> |
Output:
- Before clicking on the button:
- After clicking on the button:
.png)
