How to print the content of an object in JavaScript ?

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:
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?