Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to print content of JavaScript object?
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
- Using Object.values()
- Using a for-in loop
Using JSON.stringify() Method
The JSON.stringify() method converts JavaScript objects into a JSON string. This method is commonly used to send data to servers or display object content in a readable format.
Syntax
JSON.stringify(obj)
Parameters
- obj ? The object to stringify
Example
In the below example, we use JSON.stringify() to print the complete content of a JavaScript object:
<html>
<body>
<h2>Use JSON.stringify() to print object content</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>
Content of JavaScript object:
{"name":"Akshay","age":18,"percentage":95.45}
Using Object.values() Method
Object.values() extracts all property values from an object and returns them as an array. This method only returns values, not keys.
Syntax
Object.values(obj)
Parameters
- obj ? The object whose values to extract
Example
In the below example, we use Object.values() to print only the values of a JavaScript object:
<html>
<body>
<h3>Use Object.values() to print object values</h3>
<div id="div2"></div>
<script>
const Student = {
name: "Akshay",
age: 18,
percentage: 95.45
};
const values = Object.values(Student);
var message = "Object values:";
document.getElementById("div2").innerHTML = message + "<br>" + values.join(", ");
</script>
</body>
</html>
Object values: Akshay, 18, 95.45
Using for-in Loop
The for-in loop iterates through all enumerable properties of an object. This method gives you control over how to format and display each property.
Syntax
for (key in object) {
// Access object[key]
}
Parameters
- key ? Variable representing each property name
- object ? The object to iterate through
Example
In the below example, we use a for-in loop to print both keys and values of a JavaScript object:
<html>
<body>
<h3>Use for-in loop to print object content</h3>
<div id="div3"></div>
<script>
const Student = {
name: "Akshay",
age: 18,
percentage: 95.45
};
let content = "";
for (let key in Student) {
content += key + ": " + Student[key] + "<br>";
}
var message = "Object properties:<br>";
document.getElementById("div3").innerHTML = message + content;
</script>
</body>
</html>
Object properties: name: Akshay age: 18 percentage: 95.45
Comparison
| Method | Output Format | Shows Keys | Use Case |
|---|---|---|---|
| JSON.stringify() | JSON string | Yes | Data transfer, debugging |
| Object.values() | Array of values | No | When only values needed |
| for-in loop | Custom format | Yes | Custom formatting needs |
Conclusion
JSON.stringify() is ideal for complete object representation and data exchange. Use Object.values() when you only need property values, and for-in loops when custom formatting is required.
5K+ Views
