Skip to content
Related Articles

Related Articles

Remove blank attributes from a JavaScript Object
  • Last Updated : 07 Jun, 2019

Given a JavaScript Object with null values in it, the task is to remove those null values from the object using javascript. Below are the methods to remove the blank attributes:

  • JavaScript delete property
    This keyword deletes a property of an object. It deletes both the value and the property also. After deletion, the property is not available for use. This operator can only be used on object properties. It can not be used on variables or functions and predefined JavaScript object properties.
    Syntax:
    delete Object.property or
    delete Object['propertyName']
    

      Example 1: This example goes through each key of the object and check if the property has a null value. If it has then it deletes that property by using Delete property.




      <!DOCTYPE html>
      <html>
        
      <head>
          <title>
              JavaScript | Remove blank attributes from an Object.
          </title>
      </head>
        
      <body style="text-align:center;" id="body">
          <h1 style="color:green;">  
                  GeeksForGeeks  
              </h1>
          <p id="GFG_UP" style="font-size: 19px; font-weight: bold;">
          </p>
          <button onClick="GFG_Fun()">
              click here
          </button>
          <p id="GFG_DOWN" 
             style="color: green; font-size: 24px; font-weight: bold;">
          </p>
          <script>
              var up = document.getElementById('GFG_UP');
              var down = document.getElementById('GFG_DOWN');
              var obj = {
                  prop_1: null,
                  prop_2: 'GFG',
                  prop_3: 3,
                  prop_4: null
              }
              up.innerHTML = JSON.stringify(obj);
        
              function GFG_Fun() {
                  Object.keys(obj).forEach((key) => (obj[key] == null) && delete obj[key]);
                  down.innerHTML = JSON.stringify(obj);
              }
          </script>
      </body>
        
      </html>

      Output:

      • Before clicking the button:
      • After clicking the button:

      Example 2: This example goes through each key of the object and check if property have null and undefined values as well. If it has it deletes that property by Delete property.




      <!DOCTYPE html>
      <html>
        
      <head>
          <title>
              JavaScript | Remove blank attributes from an Object.
          </title>
      </head>
        
      <body style="text-align:center;" id="body">
          <h1 style="color:green;">  
                  GeeksForGeeks  
              </h1>
          <p id="GFG_UP" style="font-size: 19px; font-weight: bold;">
          </p>
          <button onClick="GFG_Fun()">
              click here
          </button>
          <p id="GFG_DOWN"
             style="color: green; font-size: 24px; font-weight: bold;">
          </p>
          <script>
              var up = document.getElementById('GFG_UP');
              var down = document.getElementById('GFG_DOWN');
              var obj = {
                  prop_1: null,
                  prop_2: 'GFG',
                  prop_3: 3,
                  prop_4: null
              }
              up.innerHTML = JSON.stringify(obj);
        
              function delet(obj) {
                  for (var prop in obj) {
                      if (obj[prop] === null || obj[prop] === undefined) {
                          delete obj[prop];
                      }
                  }
              }
        
              function GFG_Fun() {
                  delet(obj);
                  down.innerHTML = JSON.stringify(obj);
              }
          </script>
      </body>
        
      </html>

      Output:

      • Before clicking the button:
      • After clicking the button:



      My Personal Notes arrow_drop_up
Recommended Articles
Page :