Displaying Objects

You can turn a JavaScript object into readable text by converting it to a JSON string, inspecting its properties, or formatting selected values for display.

What it is

Displaying an object means producing text that shows its keys and values in a way a person can read. JavaScript objects are not automatically readable when placed into a string. For example, concatenating an object with text usually produces [object Object], which hides the actual data.

The most common readable-text pattern is JSON.stringify. It converts supported object data into a JSON string. Related terms include serialization, pretty-printing, console inspection, and template literals.

Why it matters

• It makes debugging easier by showing nested data instead of [object Object].
• It creates readable log messages for files, terminals, or monitoring tools.
• It helps display structured data in simple UI text areas.
• It prepares object data for APIs, storage, or copy-and-paste inspection.
• It supports nested objects and arrays with consistent formatting.

Syntax or steps

The smallest useful pattern is:

JSON.stringify(value, null, 2);

Here, value is the object you want to display. The second argument, null, means “use the default conversion rules.” The third argument, 2, adds two spaces of indentation for readability.

Steps:

1. Choose the object or nested data you want to show.
2. Convert it with JSON.stringify if you need full readable text.
3. Print it with console.log, assign it to a variable, or display it in the UI.

Example

const user = {
  name: "Ada",
  age: 36,
  roles: ["admin", "editor"],
  address: {
    city: "London",
    zip: "EC1"
  }
};

const readable = JSON.stringify(user, null, 2);
console.log(readable);

The output is a formatted string:

{
  "name": "Ada",
  "age": 36,
  "roles": [
    "admin",
    "editor"
  ],
  "address": {
    "city": "London",
    "zip": "EC1"
  }
}

Part-by-part explanation

const user = { ... } creates an object with nested data. JSON.stringify(user, null, 2) converts that object into a JSON string. The null argument keeps the default behavior, and 2 makes the output easier to read. console.log(readable) prints the resulting text.

Common mistakes

• Using String(user) or "User: " + user. This usually shows [object Object]. Fix it by using JSON.stringify(user, null, 2).
• Forgetting circular references. If an object refers back to itself, JSON.stringify can throw an error. Fix it by removing the circular property or using a custom replacer.
• Expecting functions, undefined, or symbols to appear. JSON.stringify omits many non-JSON values. Fix it by formatting those values manually.
• Displaying JSON directly in a UI without considering readability. Raw JSON is useful for debugging, but users often need labels and selected fields instead.

When to use it

Use JSON.stringify when you need a complete text snapshot of an object. Use console.log when you are inspecting objects during development. Use template literals when you only need a few fields in a human-friendly message.

Practice

Guided exercise: create a product object with name, price, and tags. Convert it to readable text with JSON.stringify(product, null, 2) and log the result.

Challenge: display only the product name and price in a sentence using a template literal.

Expected output for the challenge:

Widget costs 9.99.

Solution hint: use product.name and product.price inside backticks.

Quick check

Question: Why use JSON.stringify(user, null, 2) instead of console.log(user) when building a text log message?

Answer: JSON.stringify returns a readable string, while console.log is mainly for interactive inspection and may not produce plain text suitable for logs.

Summary

Displaying objects in JavaScript means converting structured data into readable text. JSON.stringify is the standard tool for full object snapshots, especially when indentation is needed. For user-facing messages, select and format only the fields that matter.