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.

Below are the methods to perform Javascript display object property:

Displaying the Object Properties by name

In this approach, we are 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.

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

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.

const obj1 = { name: "Nikita", age: 24, city: "Dehradun" };
for (let key in obj1) {
    console.log(`${key}: ${obj1[key]}`);
};

name: Nikita
age: 24
city: Dehradun

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.

let obj1 = { name: "Ankit", age: 22, city: "Noida" };
let result = Object.values(obj1);
console.log(result);

[ 'Ankit', 22, 'Noida' ]

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.

const obj1 = { name: "Rahul", age: 18, city: "Delhi" };
const result = JSON.stringify(obj1);
console.log(result);

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