Removing property from a JSON object in JavaScript

Javascript Web Development Front End Technology

A JSON (JavaScript object notation) Object is always surrounded by the curly braces {}. The values must be a valid JSON data type, and the keys must be strings. JSON supports the following data types: number, string, object, Boolean, array, and null.

There has to be a colon (":") separating the keys and values. A comma separates each key and value pair. Following is the syntax of JSON Object −

JSONObject = {}

Following is the basic declaration of JSON Object in JavaScript −

JSONObject = { 
   "name" : "Suriya",  
   "designation" : "Actor",  
   "State" : "Tamil Nadu", 
   "Recent_film" : "Vikram" 
};

Input-output scenario

Consider we have JSON Object having key and values and performed deletion of property of the object. Assume in the below example, we have deleted the property named "Recent_film".

Input = JSONObject = { 
   "name" : "Suriya",  
   "designation" : "Actor",  
   "State" : "Tamil Nadu", 
   "Recent_film" : "Vikram" 
}; 
Output = {"name" : "Suriya", "designation" : "Actor", State" : "Tamil Nadu"}

We can access the object values by using dot(“.”) notation. And also by using bracket notation([]).

Example

Using the Delete operator

The Delete operator is the easiest way to delete the object property. if we want to delete multiple properties which are in the object, we need to use this operator multiple times.

In the following example, we have created a JSON Object with keys and values. By using the delete operator, we have deleted the name value in the object.


<!DOCTYPE html> 
<html> 
<head> 
   <title>Deleting property of an JSON object.</title> 
</head> 
<body> 
   <p id="para"></p>  
   <script> 
      var Cricketer = { 
         'name': "Dhoni", 
         'role': "Keeper-batsmen", 
         'age': 41, 
         'bat': "Right", 
      };  
      delete Cricketer.role; 
      document.getElementById("para").innerHTML = Cricketer.name + " age" + " is " + Cricketer.role;  
   </script>  
</body> 
</html>

Example

Using Destructing assignment

The Destructing assignment is a syntax in JavaScript expression, which will expand the values from arrays or the properties of an object into distinct variables. This will not change the original object and references instead, it will create a new object reference.

const numbers = { 
   'one' : 1, 
   'two' : 2, 
   'three' : 3 
};  
const {one, two, ...excluding} = numbers;  
console.log(JSON.stringify(excluding)); 
// output: '{"three":3}'

In the above snippet, we have used destructing assignment and removed properties one and two.

Example 2

In the example below, we’ve deleted the name and bat properties. The destructing operator will create a new object with all properties except the values which got deleted. As it is an immutable operation, the original object will not effect by deleting the properties.


<!DOCTYPE html> 
<html> 
<head> 
   <title>Deleting property of an JSON object.</title> 
</head> 
<body> 
   <p id = "para"> </p>  
   <script> 
      var Cricketer = { 
         'name': 'Kohli', 
         'role': 'Batsmen', 
         'age': 34, 
         'bat' : 'Right', 
      } 
      const { name, bat, ...excluding } = Cricketer; 
      document.getElementById("para").innerHTML ="The JSON object after deleting name and bat will be:" + JSON.stringify(excluding);   
   </script>  
</body> 
</html>

Example

Using reduce method

In the below example, we deleted the particular property of objects by using reduce method.


<!DOCTYPE html> 
<html> 
<head> 
   <title>Deleting property of an JSON object.</title> 
</head> 
<body> 
   <p id = "para"> </p>  
   <script> 
      var Cricketer = { 
         'name': 'Kohli', 
         'role': 'Batsmen', 
         'age': 34, 
         'bat' : 'Right', 
      } 
      const exceptbat = Object.keys(Cricketer).reduce((acc, prop) => { 
         if (prop !== 'bat') { 
            acc[prop] = Cricketer[prop] 
         } 
         return acc 
      }, {})  
      document.getElementById("para").innerHTML ="The JSON object after deleting name and bat will be:" + JSON.stringify(exceptbat);   
   </script>  
</body> 
</html>

Example

Using Reflect delete property

The Reflect.deleteProperty() method is just like the delete operator. This method is used to delete the properties.

In the following example, we have deleted the object property by using Reflect.deleteProperty() and, we’ve passed the 'role' key of the object as a parameter to this method.


<!DOCTYPE html> 
<html> 
<head> 
   <title>Deleting property of an JSON object.</title> 
</head> 
<body> 
   <button onClick = "func()"> click to delete property</button> 
   <p id="para"></p>  
   <script> 
      var Cricketer = { 
         'name': "Rohit sharma", 
         'role': "batsmen", 
         'age': 33, 
         'bat': "Right", 
      }; 
      function func(){ 
         Reflect.deleteProperty(Cricketer, 'role'); 
         document.getElementById("para").innerHTML = Cricketer.name + " role" + " is " + Cricketer.role; 
      }; 
   </script> 
</body> 
</html>

Example

Using the for-in method

In the example below, we’ve created a JSON Object and iterated through the object. We’ve also created an empty object, which is used to store the object properties excluding the deleted elements.


<!DOCTYPE html> 
<html> 
<head> 
   <title>Deleting property of an JSON object.</title> 
</head> 
<body> 
   <button onClick = "func()"> Click me! </button> 
   <p id="para"></p>  
   <script> 
      const Cricketer = { 
         'name': "Rohit sharma", 
         'role': "batsmen", 
         'age': 33, 
         'bat': "Right", 
      };  
      function func(){ 
         let newJSONobj = {} 
         for (const prop in Cricketer) { 
            if (prop !== 'age') { 
               newJSONobj[prop] = Cricketer[prop] 
            } 
         } 
         document.getElementById("para").innerHTML = "The properties after removing age will be: " + JSON.stringify(newJSONobj); 
      }; 
   </script> 
</body> 
</html>