How to print the content of an object in JavaScript ?
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:
Please Login to comment...