How to print content of JavaScript object?

Javascript Object Oriented Programming Front End Technology

In this tutorial, we will learn to print the content of a JavaScript object.

Objects are similar to variables, but they can contain many values. Javascript object values are written as key: value pairs, and each pair is separated by commas. It is used to access data from databases or any other sources.

Following are the ways to print the content of JavaScript objects −

Using the JSON.stringify() Method
And using a for-in loop
Using Object.values()

Using the JSON.stringify() Method

The JSON.stringify() is used to convert JavaScript Objects into a string. We have to use JSON.stringify() to send the data to the server. Arrays can also be converted to the string by using JSON.stringify().

Syntax

Following is the syntax to print the content of JavaScript objects by using JSON.stringify() −

var obj = {};
JSON.stringify(obj);

Parameters

obj − Name of an Object

Example

In the below given example, we are using the JSON.stringify() method to print the content of a JavaScript object


<html>
<body>
   <h2> Use <i> JSON.stringify() </i> to print content of JavaScript object
   </h2>
   <div id = "div1"> </div>
   <script>
      const Student = {
         name: "Akshay",
         age: 18,
         percentage: 95.45
      };
      const print = JSON.stringify(Student);
      var message="Content of Javascript object:";
      document.getElementById("div1").innerHTML = message+"<br><br>"+print;
   </script>
</body>
</html>

In the above example, users can see that we have printed the content of a JavaScript object using the JSON.stringify method.

Using the Object.values() Method

Object.values() is the method used to convert a javascript object into an array. Object.values() takes an Object as a parameter and outputs object values as elements of an array.

Syntax

Following is the syntax to print the content of a JavaScript object −

var obj = {};
Object.values(obj);

Parameters

obj − Name of an Object

Example

In the below given example, we are using the Object.values() method to print the content of a JavaScript object.


<html>
<body>
   <h3> Use <i> Object.values() </i> to print content of JavaScript object
   </h3>
   <div id = "div1"> </div>
   <script>
      const Student = {
         name: "Akshay",
         age: 18,
         percentage: 95.45
      };
      const value = Object.values(Student);
      var message="Content of Javascript object:";
      document.getElementById("div1").innerHTML = message+"<br>"+value;
   </script>
</body>
</html>

In the above example, users can see that we have printed the content of a JavaScript object using the Object.Values() method.

Using a for-in loop to print the content of a JavaScript object

To execute a block of statements for every property of an object, a for-in loop is used.

Users can follow the below syntax to print the content of JavaScript objects by using the for-in loop −

Syntax

var object = {};
for (key in object) {
   // statements
}

Parameters

key − A Name of the property of an object (You can use any user-defined variable)
object − A Name of an object to print

Example

In the below given example, we are using the for-in loop to print the content of a JavaScript object.


<html>
<body>
   <h3> Use <i> for </i> loop to print content of JavaScript object </h3>
   <div id = "div1"> </div>
   <script>
      const Student = {
         name: "Akshay",
         age: 18,
         percentage: 95.45
      };
      let value = "";
      for (let key in Student) {
         value += "<br>"+Student[key] ;
      };
      var message="Content of JavaScript object:";
      document.getElementById("div1").innerHTML = message+"<br>"+value;
   </script>
</body>
</html>

In the above example, users can see that we have printed the content of a JavaScript object using the for-in loop.

We have learned to print the content of a JavaScript Object. Among the above three ways, the JSON.stringify() method prints both keys and their values, whereas the other two ways only print the values of the properties. JSON.stringify() is the most used method for exchanging the data between the client and the server.

Shubham Vora

Updated on: 15-Sep-2022

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started