How to Format JSON: A Complete Guide

JSON (JavaScript Object Notation) has become the de-facto standard for data exchange on the web. However, minified or poorly formatted JSON can be extremely difficult for developers to read and debug. In this guide, we will explore the best practices for formatting JSON and how to keep your data structured and legible.

Why Format JSON?

Formatted JSON (also known as "pretty-printed" JSON) uses line breaks, spacing, and indentations to display hierarchical levels clearly.

Consider this minified JSON payload:

{"user":{"id":101,"name":"Alice","roles":["admin","editor"]},"status":"active"}

Compare it to the formatted version:

{
  "user": {
    "id": 101,
    "name": "Alice",
    "roles": [
      "admin",
      "editor"
    ]
  },
  "status": "active"
}

The formatted version instantly exposes the structure, properties, and nesting relationships of your data.

Standard Spacing Guidelines

When formatting JSON, developers typically choose between:

• 2-space indentation: Highly popular for complex nested structures to prevent lines wrapping too early on small viewports.
• 4-space indentation: Traditional standard, providing maximum contrast between nesting levels.
• Tab indentation: Respects the viewer's default editor settings.

Key Sorting

Another advanced formatting technique is recursive key sorting. Sorting JSON object keys alphabetically makes it easy to locate specific properties inside large configurations and assists in diff comparisons between different files.

Common Formatting Pitfalls

Here are a few quick items to check if your JSON fails to format correctly:

1. Double Quotes: Keys and string values must always use double quotes ("key"), not single quotes ('key').
2. Trailing Commas: Commas are only separators; you cannot have a trailing comma after the last item in an object or array.
3. Control Characters: Hidden control characters or tabs inside string values can corrupt parsing. Make sure to escape them as \t, \n, etc.