DEV Community

Snappy Tools
Snappy Tools

Posted on • Originally published at snappytools.app

JSON Formatting: Why It Matters and How to Read Any JSON Response Instantly

#tools #javascript #beginners #webdev

JSON is everywhere. It is the default format for REST APIs, configuration files, database exports, and inter-service communication. Yet most developers have spent time staring at a wall of compressed JSON, trying to trace a nested structure by eye.

This article covers how to read, format, and validate JSON quickly — whether you are debugging an API response, reviewing a config file, or just trying to understand what a service is actually returning.

What is JSON formatting?

JSON (JavaScript Object Notation) is valid whether it is written on one line or spread across hundreds. A minified API response like:

{"user":{"id":42,"name":"Alice","roles":["admin","editor"],"settings":{"theme":"dark","notifications":true}}}
Enter fullscreen mode Exit fullscreen mode

…and a formatted version like:

{
  "user": {
    "id": 42,
    "name": "Alice",
    "roles": [
      "admin",
      "editor"
    ],
    "settings": {
      "theme": "dark",
      "notifications": true
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

…are exactly the same data. Formatting adds whitespace and indentation to make the structure readable. Minification removes all of that whitespace to reduce file size.

Why JSON gets minified in the first place

Production APIs and configuration systems almost always serve minified JSON because:

  1. File size — removing whitespace can cut JSON size by 20–40% for deeply nested structures
  2. Transfer speed — smaller payloads load faster, especially on mobile networks
  3. Programmatic consumption — parsers do not care about whitespace; they just need valid syntax

The problem is that minified JSON is nearly unreadable to humans. When debugging, you need it formatted.

How to validate JSON

A common source of bugs is almost-valid JSON. The most frequent mistakes:

Trailing commas — valid in JavaScript objects but not in JSON:

// Invalid JSON:
{
  "name": "Alice",
  "age": 30,
}
Enter fullscreen mode Exit fullscreen mode

Single quotes — JSON requires double quotes for strings:

// Invalid:
{'name': 'Alice'}

// Valid:
{"name": "Alice"}
Enter fullscreen mode Exit fullscreen mode

Undefined and NaN — JavaScript values that have no equivalent in JSON:

// Invalid:
{"value": undefined}
{"ratio": NaN}
Enter fullscreen mode Exit fullscreen mode

Unescaped special characters — newlines, tabs, and backslashes inside strings must be escaped:

// Invalid:
{"path": "C:\Users\Alice"}

// Valid:
{"path": "C:\\Users\\Alice"}
Enter fullscreen mode Exit fullscreen mode

A JSON formatter with built-in validation catches all of these immediately, showing you the exact line and character where the syntax breaks.

Reading deeply nested JSON

Real-world JSON from APIs is often 4–8 levels deep. A few strategies help:

Start from the outside in — identify the top-level keys first, then drill into the one you need. A formatted view makes this straightforward because indentation directly represents nesting depth.

Look for arrays — arrays of objects (e.g. a list of users or orders) are the most common structure. Each element follows the same schema, so understanding one tells you the structure of all.

Check for IDs — most nested objects reference other objects by ID. Understanding which IDs refer to what helps you trace relationships.

Watch for nulls — null values in a response often indicate optional fields that were not populated for this record. Do not treat them as errors.

Working with JSON in the terminal

If you have jq installed, you can format JSON directly:

# Format a file
cat response.json | jq .

# Extract a specific field
cat response.json | jq '.user.name'

# Filter an array
cat response.json | jq '.users[] | select(.active == true)'
Enter fullscreen mode Exit fullscreen mode

Without jq, Python's built-in json module works:

python3 -m json.tool response.json
Enter fullscreen mode Exit fullscreen mode

Both produce formatted output. The jq approach is more powerful for querying; the Python approach works everywhere Python is installed.

Formatting JSON in JavaScript

In code, JSON.stringify() accepts spacing arguments:

const obj = { name: "Alice", age: 30 };

// Minified (default):
JSON.stringify(obj); // '{"name":"Alice","age":30}'

// Formatted with 2-space indent:
JSON.stringify(obj, null, 2);
// {
//   "name": "Alice",
//   "age": 30
// }

// With tab indent:
JSON.stringify(obj, null, '\t');
Enter fullscreen mode Exit fullscreen mode

The second argument (null above) is a replacer — you can pass an array of keys to include only those fields, or a function to transform values.

Minifying JSON for production

When embedding JSON in a frontend bundle or API response, minify before shipping:

// Remove all whitespace:
JSON.stringify(JSON.parse(formattedJson))
Enter fullscreen mode Exit fullscreen mode

For files, jq -c produces compact output:

jq -c . formatted.json > minified.json
Enter fullscreen mode Exit fullscreen mode

The fastest way to format JSON without tooling

If you do not have jq or a code editor open, pasting JSON into a browser-based formatter is the quickest path. SnappyTools JSON Formatter formats, minifies, and validates JSON instantly — just paste and go. It highlights syntax errors with the exact position, works offline once loaded, and never uploads your data anywhere.

Useful when debugging API responses at the command line, reviewing a config diff in a code review, or checking a copied payload from a network tab.

JSON formatting is a small skill that pays dividends every time you read a response, debug a build error, or review a pull request that touches configuration files. Once you train yourself to look at structure first — keys, types, nesting depth — you can extract the information you need from almost any JSON in seconds.

Top comments (0)