JavaScript Display Objects refer to manipulating and rendering HTML elements on web pages dynamically using DOM (Document Object Model) methods to show, hide, modify, or update content interactively.
There are several methods that can be used to perform Javascript display object property, which are listed below:
- Displaying Object Properties by name
- Displaying Object Properties in a Loop
- Displaying Object using Object.values() Method
- Displaying Object using JSON.stringify() Method
We will explore all the above methods along with their basic implementation with the help of examples.
Approach 1: Displaying the Object Properties by name
In this approach, we are using displaying the object properties by name, which means accessing and showing specific properties of an object using their respective names.
Syntax:
objectName.property
Example: In this example, we are using the above-explained approach.
Javascript
const obj1 = { name: "Aman", age: 21, city: "Noida" }; console.log("name :", obj1.name); console.log("age :", obj1.age); console.log("city name :", obj1.city); |
name : Aman age : 21 city name : Noida
Approach 2: Displaying the Object Properties in a Loop
In this approach, we are using Loop through object keys using Object.keys(). Access each property’s value using obj1[key] and display keys and values using template literals.
Syntax:
for (let key in obj1) {
console.log(`${key}: ${obj1[key]}`);
};
Example: In this example, we are using the above-explained approach.
Javascript
const obj1 = { name: "Nikita", age: 24, city: "Dehradun" }; for (let key in obj1) { console.log(`${key}: ${obj1[key]}`); }; |
name: Nikita age: 24 city: Dehradun
Approach 3: Displaying the Object using Object.values()
Displaying the object using Object.values() retrieves the values of an object’s properties and presents them as an array.
Syntax:
Object.values(obj)
Example: In this example, we are using the above-explained approach.
Javascript
let obj1 = { name: "Ankit", age: 22, city: "Noida" }; let result = Object.values(obj1); console.log(result); |
[ 'Ankit', 22, 'Noida' ]
Approach 4: Displaying the Object using JSON.stringify()
Displaying the object using JSON.stringify() converts the object to a JSON string representation, making it easier to view or send data.
Syntax:
JSON.stringify( value, replacer, space );
Example: In this example, we are using the above-explained approach.
Javascript
const obj1 = { name: "Rahul", age: 18, city: "Delhi" }; const result = JSON.stringify(obj1); console.log(result); |
{"name":"Rahul","age":18,"city":"Delhi"}
