Remove blank attributes from a JavaScript Object

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.



      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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>

      chevron_right

      
      

      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.

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!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>

      chevron_right

      
      

      Output:

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


      My Personal Notes arrow_drop_up

      Check out this Author's contributed articles.

      If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

      Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




      Article Tags :

      Be the First to upvote.


      Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.