JavaScript Object Display

When working with objects in JavaScript, it’s important to know how to display or inspect their contents. Whether you’re debugging, logging data to the console, or showing object data on a web page, there are several ways to do it.

In this tutorial, you’ll learn different techniques for displaying JavaScript objects.

---

1. Using console.log()

The most common and simplest way to display an object is by using console.log().

javascriptCopyEditlet user = {
  name: "Alice",
  age: 30
};

console.log(user);

In browser developer tools (DevTools), this will show the object as an expandable structure, where you can inspect keys and values.

---

2. Displaying Object Properties One by One

You can manually access and display object properties using dot notation or bracket notation.

javascriptCopyEditconsole.log(user.name); // Alice
console.log(user["age"]); // 30

---

3. Looping Through Object Properties

Using for...in Loop

javascriptCopyEditfor (let key in user) {
  console.log(key + ": " + user[key]);
}

Output:

makefileCopyEditname: Alice
age: 30

This method is useful when you don’t know the object keys in advance.

---

4. Using Object.keys(), Object.values(), and Object.entries()

These methods help you extract parts of an object.

javascriptCopyEditconsole.log(Object.keys(user));   // ["name", "age"]
console.log(Object.values(user)); // ["Alice", 30]
console.log(Object.entries(user)); // [["name", "Alice"], ["age", 30]]

You can combine Object.entries() with a loop:

javascriptCopyEditfor (let [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

---

5. Converting an Object to a String with JSON.stringify()

To show an object as a readable string (e.g., in an alert box or in HTML), use JSON.stringify().

javascriptCopyEditlet jsonString = JSON.stringify(user);
console.log(jsonString); // {"name":"Alice","age":30}

You can also format the output with indentation:

javascriptCopyEditlet formatted = JSON.stringify(user, null, 2);
console.log(formatted);

This makes it easier to read:

jsonCopyEdit{
  "name": "Alice",
  "age": 30
}

---

6. Displaying Objects in HTML

You can insert object data into a web page using DOM methods.

Example: Using innerHTML

htmlCopyEdit<div id="output"></div>

<script>
  let person = { name: "Bob", city: "New York" };
  document.getElementById("output").innerHTML = JSON.stringify(person);
</script>

This will display:

jsonCopyEdit{"name":"Bob","city":"New York"}

For better readability, you can loop and format it:

htmlCopyEdit<ul id="list"></ul>

<script>
  let person = { name: "Bob", city: "New York" };
  let html = "";

  for (let key in person) {
    html += `<li>${key}: ${person[key]}</li>`;
  }

  document.getElementById("list").innerHTML = html;
</script>

---

7. Using console.table()

For better visuals in the console, console.table() shows objects in a table format.

javascriptCopyEditlet users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];

console.table(users);

This displays a nice table with rows and columns.

---

Conclusion

There are many ways to display JavaScript objects depending on your needs:

• Use console.log() or console.table() for debugging.
• Use JSON.stringify() to create readable strings.
• Loop through object properties for dynamic output.
• Inject object data into the DOM using innerHTML.