Friday, December 27, 2024
Google search engine
HomeLanguagesJavascriptJavaScript Display Objects

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"}
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!

RELATED ARTICLES

Most Popular

Recent Comments