JavaScript Display Objects

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);

Output

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]}`);
};

Output

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);

Output

[ '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);

Output

{"name":"Rahul","age":18,"city":"Delhi"}