DEV Community

Snappy Tools
Snappy Tools

Posted on

How to Read, Debug, and Format JSON API Responses

#productivity #javascript #webdev #beginners

If you have spent any time working with REST APIs, you have stared at a wall of minified JSON and wished it would just… breathe. This guide covers practical techniques for reading, debugging, and formatting JSON API responses — from quick browser tricks to command-line tools to purpose-built formatters.

Why JSON Comes Out Ugly

Most APIs return minified JSON by default. Minification removes all whitespace and newlines, reducing response size and improving transfer speed. That is great for production, but genuinely terrible for debugging:

{"user":{"id":42,"name":"Alice","roles":["admin","editor"]},"meta":{"created":"2026-01-15","active":true}}
Enter fullscreen mode Exit fullscreen mode

The same data formatted:

{
  "user": {
    "id": 42,
    "name": "Alice",
    "roles": ["admin", "editor"]
  },
  "meta": {
    "created": "2026-01-15",
    "active": true
  }
}
Enter fullscreen mode Exit fullscreen mode

Same content. Completely different readability.

Method 1: Paste Into a Browser-Based Formatter

The fastest option when you have already copied a JSON string: paste it into an online JSON formatter. A good one will:

  • Format and syntax-highlight the JSON instantly
  • Validate the structure and show you exactly which line has an error
  • Let you minify it back with one click
  • Sort keys alphabetically if you need to compare two responses

No installation, no file, no terminal required.

Method 2: Pretty-Print in the Terminal

If you are working with APIs from the command line, jq is the gold standard:

curl -s https://api.example.com/users/42 | jq '.'
Enter fullscreen mode Exit fullscreen mode

The . is the identity filter — it just outputs the entire JSON formatted. jq also lets you extract specific fields:

# Get just the name field
curl -s https://api.example.com/users/42 | jq '.name'

# Get all role names from an array
curl -s https://api.example.com/users/42 | jq '.roles[]'
Enter fullscreen mode Exit fullscreen mode

No jq? Python ships with a built-in JSON formatter:

curl -s https://api.example.com/users/42 | python3 -m json.tool
Enter fullscreen mode Exit fullscreen mode

Method 3: Format JSON in JavaScript

When debugging inside a Node.js script or browser console:

// Pretty-print any object
console.log(JSON.stringify(response, null, 2));
Enter fullscreen mode Exit fullscreen mode

The third argument 2 is the indent level. Use 4 for 4-space indentation, or "\t" for tabs.

To format a JSON string you have already received:

const raw = '{"name":"Alice","age":30}';
const formatted = JSON.stringify(JSON.parse(raw), null, 2);
console.log(formatted);
Enter fullscreen mode Exit fullscreen mode

Method 4: Format JSON in Python 

import json

raw = '{"name": "Alice", "age": 30}'
parsed = json.loads(raw)
print(json.dumps(parsed, indent=2))
Enter fullscreen mode Exit fullscreen mode

To sort keys alphabetically (useful for diffs):

print(json.dumps(parsed, indent=2, sort_keys=True))
Enter fullscreen mode Exit fullscreen mode

Debugging Common JSON Errors

"Unexpected token" or "Unexpected end of input"

These usually mean:

  1. Trailing comma — {"a": 1, "b": 2,} — JSON forbids the last comma. JavaScript objects allow it; JSON does not.
  2. Single quotes — JSON requires double quotes everywhere. {'name': 'Alice'} is invalid JSON.
  3. Unquoted keys — {name: "Alice"} is valid JavaScript but not valid JSON.
  4. Comments — JSON has no comment syntax. // this is a comment inside JSON will break parsers.

The easiest fix: paste the JSON into a validator to see the exact line and character position of the error.

The response is valid but nested too deeply

Some APIs return deeply nested objects. A JSON formatter with a collapsible tree view makes it easy to navigate. Alternatively, use jq to drill straight to the value you need:

echo '{"a":{"b":{"c":{"d":"found it"}}}}' | jq '.a.b.c.d'
# "found it"
Enter fullscreen mode Exit fullscreen mode

The response looks right but parsing fails in code

Check the Content-Type header. If the server sends text/plain instead of application/json, fetch() will not automatically parse it. Use response.text() and then JSON.parse() manually:

const text = await response.text();
const data = JSON.parse(text);
Enter fullscreen mode Exit fullscreen mode

Working With Large JSON Responses

For very large responses (tens of MB), browser-based tools may become slow. Use the command line instead:

# Format and pipe through less for navigation
jq '.' large.json | less

# Extract only the fields you care about
jq '[.[] | {id: .id, name: .name}]' large.json > slim.json
Enter fullscreen mode Exit fullscreen mode

Comparing Two JSON Responses

When you need to diff two API responses (before and after a change, or two environments):

# Format both, then diff
jq -S '.' response1.json > a.json
jq -S '.' response2.json > b.json
diff a.json b.json
Enter fullscreen mode Exit fullscreen mode

The -S flag sorts keys, so you compare actual content differences rather than key ordering differences.

Or use the text diff checker to paste both responses and see a side-by-side diff without installing anything.

Summary

Situation Best tool
Quick one-off format / validate snappytools.app/json-formatter
Command-line API calls `curl ... \
Inside Node.js or browser console {% raw %}JSON.stringify(data, null, 2)
Inside Python json.dumps(data, indent=2)
Comparing two responses jq -S + diff, or text diff tool
Very large files jq + less

JSON is simple in theory and occasionally annoying in practice. Having the right tool for each situation takes the friction out of debugging.

Top comments (0)