Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to print the content of an object in JavaScript ?

  • Last Updated : 09 May, 2019

The JSON.stringify() method is used to print the JavaScript object.
JSON.stringify() Method: The JSON.stringify() method is used to allow to take a JavaScript object or Array and create a JSON string out of it. While developing an application using JavaScript many times it is needed to serialize the data to strings for storing the data into a database or for sending the data to an API or web server. The data has to be in the form of the strings. This conversion of an object to a string can be easily done with the help of the JSON.stringify() function.

Syntax:

JSON.stringify(value, replacer, space)

Example 1: This example converting the object to a string by simply traversing it and appending the object property and value to the string.




<!DOCTYPE html> 
<html
    <head
        <title
            Print the content of object using JavaScript
        </title>
    </head
      
    <body style = "text-align:center;" id = "body"
      
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
      
        <p>
            Print JavaScript Object.
        </p>
          
        <button onclick = "gfg_Run()"
            print object
        </button>
          
        <p id = "GFG_DOWN" style 
               = "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_down = document.getElementById("GFG_DOWN");
              
            var GFG_object = { 
                prop_1: 'val_11', 
                prop_2: 'val_12', 
                prop_3: 'val_13'
            };
              
            var printObj = function(obj) {
                var string = '';
  
                for(var prop in obj) {
                    if(typeof obj[prop] == 'string') {
                        string+= prop + ': ' + obj[prop]+'; </br>';
                    }
                    else {
                        string+= prop + ': { </br>' + print(obj[prop]) + '}';
                    }
                }
  
                return string;
            }
            function gfg_Run() { 
                el_down.innerHTML = printObj(GFG_object);
            }
        </script
    </body
</html>                    

Output:

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

Example 2: This example using the JSON.stringify() method to convert the object to string.




<!DOCTYPE html> 
<html
    <head
        <title
            JavaScript | Print content of object
        </title>
    </head
      
    <body style = "text-align:center;" id = "body"
          
        <h1 style = "color:green;"
            GeeksForGeeks 
        </h1>
          
        <p>
            Print JavaScript Object.
        </p>
      
        <button onclick = "gfg_Run()"
            print object
        </button>
          
        <p id = "GFG_DOWN" style 
                = "color:green; font-size: 20px; font-weight: bold;">
        </p>
          
        <script>
            var el_down = document.getElementById("GFG_DOWN");
              
            var GFG_object = {
                prop_1: 'val_11',
                prop_2: 'val_12', 
                prop_3: 'val_13'
            };
              
            function gfg_Run() { 
                el_down.innerHTML = JSON.stringify(GFG_object);
            }
              
        </script
    </body
</html>                    

Output:

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

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!