How to Read and Debug JSON: Tree View vs Raw Text

You make an API call and get back 500 lines of minified JSON. Or you open a config file with deeply nested objects five levels deep. How do you make sense of it?

Reading and debugging JSON is a daily task for most developers. Whether you are inspecting API responses, tracking down a missing field in a config file, or validating data before sending it to a database, you need the right approach. There are two fundamental methods: working with raw text (using a JSON Formatter or jq) and using a tree view for visual exploration. Each has strengths, and knowing when to use which will make you significantly faster at debugging JSON data issues.

The Problem with Raw JSON

Here’s a typical API response, minified as most APIs deliver it:

{"users":[{"id":1,"name":"Alice","address":{"street":"123 Main St","city":"Springfield","state":"IL","zip":"62701"},"roles":["admin","editor"],"preferences":{"theme":"dark","notifications":{"email":true,"sms":false,"push":true}}},{"id":2,"name":"Bob","address":{"street":"456 Oak Ave","city":"Portland","state":"OR","zip":"97201"},"roles":["viewer"],"preferences":{"theme":"light","notifications":{"email":false,"sms":false,"push":false}}}]}

Good luck finding Bob’s push notification setting in there. Even after formatting with proper indentation, deeply nested JSON is hard to navigate visually — you’re constantly counting brace levels and matching opening/closing brackets.

Approach 1: Raw Text + Formatting

The simplest improvement is to format (pretty-print) the JSON with proper indentation. This works well for:

• Small to medium documents (under ~200 lines)
• Flat or shallow structures (1-2 levels of nesting)
• When you need to edit the JSON (tree views are usually read-only)
• Quick validation — is this even valid JSON?

Tools for this approach:

• jq '.' in the terminal — the Swiss army knife of JSON processing
• python -m json.tool — no installation needed if Python is available
• Your IDE’s built-in formatter (VS Code: Shift+Alt+F)
• JSON.stringify(data, null, 2) in a browser console

Pro tip with jq: You can filter and extract specific paths:

# Get just Bob's notification settings
cat data.json | jq '.users[1].preferences.notifications'

# Get all user names
cat data.json | jq '.users[].name'

# Find users with admin role
cat data.json | jq '.users[] | select(.roles[] == "admin")'

Approach 2: Tree View

A tree view renders JSON as a collapsible, hierarchical structure — like a file explorer for your data. Each key-value pair is a node that you can expand or collapse.

This works best for:

• Large documents (1000+ lines when formatted)
• Deeply nested structures (3+ levels)
• Exploring unfamiliar data — you don’t know the structure yet
• Finding specific values — visual search through collapse/expand

With a tree view, finding Bob’s push notification setting becomes trivial: expand users → expand [1] → expand preferences → expand notifications → see push: false. No bracket counting needed.

What to Look for in a Tree View

A good JSON tree viewer shows:

• Color-coded types — strings, numbers, booleans, and null should be visually distinct
• Collapse/expand — with keyboard shortcuts, not just mouse clicks
• Node counts — {5} next to objects (5 keys) and [10] next to arrays (10 items)
• Path display — showing the full path like users[1].preferences.notifications.push
• Search — find nodes by key name or value

When to Use Which

Common JSON Parsing Errors

These are the mistakes that catch developers most often. JSON syntax is strict — unlike JavaScript object literals, there is no room for shortcuts.

Trailing Commas

// INVALID — trailing comma after "banana"
{
  "fruits": ["apple", "banana",]
}

JavaScript allows trailing commas in objects and arrays, but JSON does not. Remove the last comma or use a linter that catches this.

Single Quotes

// INVALID — strings must use double quotes
{'name': 'Alice'}

// VALID
{"name": "Alice"}

JSON requires double quotes for both keys and string values. This is defined in the JSON specification (ECMA-404).

Unquoted Keys

// INVALID — keys must be quoted
{name: "Alice"}

// VALID
{"name": "Alice"}

Comments

// INVALID — no comments in JSON
{
  "port": 8080,  // server port
  "debug": true  /* enable logging */
}

If you need comments in config files, consider YAML (which supports # comments), JSONC, JSON5, or TOML.

Special Values

// INVALID — NaN, Infinity, and undefined are not valid JSON
{"value": NaN, "max": Infinity, "data": undefined}

// VALID alternatives
{"value": null, "max": 1.7976931348623157e+308, "data": null}

Encoding Issues

If your JSON contains non-ASCII characters and parsing fails, check the encoding. JSON must be UTF-8, UTF-16, or UTF-32, with UTF-8 strongly recommended. Files saved in Latin-1 or Windows-1252 encoding will break on characters like é or ñ.

Debugging Tips

Start with validation. Before trying to read JSON, make sure it’s actually valid. A missing comma or extra bracket can make the whole document unparseable. Use a JSON Validator to catch syntax errors with clear error messages.

Pretty-print, then search. If you know the key name you’re looking for, format the JSON and use your text editor’s search (Ctrl+F). This is faster than manually navigating a tree for known paths.

Use the browser console for API debugging. When debugging API responses:

fetch('/api/users')
  .then(r => r.json())
  .then(data => {
    console.log(data);             // Chrome shows an interactive tree
    console.table(data.users);      // Table view for arrays of objects
  });

Chrome DevTools and Firefox DevTools both show JSON as interactive trees in the console — often the fastest way to explore API responses during development.

Convert to YAML for readability. For deeply nested config-like JSON, temporarily converting to YAML can make the structure clearer thanks to YAML’s indentation-based syntax. Use our JSON to YAML Converter for a quick view.

Export to CSV for tabular data. If you’re dealing with arrays of flat objects (like API results), converting JSON to CSV and opening in a spreadsheet can be faster than reading nested structures.

Try It Yourself

Use our JSON Tree Viewer to paste any JSON and explore it as an interactive tree — with color-coded types, node counts, and expand/collapse at every level.

Further Reading

• json.org — The official JSON specification and syntax diagrams
• RFC 8259 — The JSON Data Interchange Format (IETF standard)
• jq Manual — Complete reference for the jq command-line JSON processor
• MDN: JSON.parse() — JavaScript JSON parsing reference
• MDN: JSON.stringify() — JavaScript JSON serialization reference