DEV Community

arenasbob2024-cell
arenasbob2024-cell

Posted on • Originally published at viadreams.cc

JSON Formatting Best Practices Every Developer Should Know

#json #webdev #javascript #beginners

Working with JSON is a daily task for most developers, yet many of us still paste messy API responses into random online tools without thinking twice. Let me share what I've learned about JSON formatting after years of debugging poorly structured data.

Why JSON Formatting Matters

Unformatted JSON is technically valid, but it's a nightmare to read. Consider this single-line mess:

{"users":[{"id":1,"name":"Alice","roles":["admin","editor"],"settings":{"theme":"dark","notifications":true}},{"id":2,"name":"Bob","roles":["viewer"],"settings":{"theme":"light","notifications":false}}]}
Enter fullscreen mode Exit fullscreen mode

Now compare it with the formatted version:

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

Night and day. Formatting makes bugs visible.

Common JSON Mistakes

1. Trailing Commas

JavaScript allows trailing commas in objects and arrays. JSON does not.

// INVALID - trailing comma
{"name": "Alice", "age": 30,}

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

2. Single Quotes

JSON requires double quotes. Always.

// INVALID
{'name': 'Alice'}

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

3. Unquoted Keys

Every key must be a double-quoted string.

// INVALID
{name: "Alice"}

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

4. Comments

JSON doesn't support comments. If you need comments, consider JSONC or YAML.

Formatting in Your Editor

VS Code: Select JSON text, then Shift+Alt+F (Windows) or Shift+Option+F (Mac).

Command Line:

# Python (built-in)
echo '{"a":1}' | python -m json.tool

# jq (if installed)
echo '{"a":1}' | jq .

# Node.js
echo '{"a":1}' | node -e "process.stdin.on('data',d=>console.log(JSON.stringify(JSON.parse(d),null,2)))"
Enter fullscreen mode Exit fullscreen mode

Online JSON Formatter

When you need a quick format without opening your editor, I built a free tool at DevToolBox JSON Formatter. It handles:

  • Format & beautify with customizable indentation
  • Validate with clear error messages
  • Minify for production use
  • Tree view for exploring nested structures
  • Works 100% client-side (your data never leaves your browser)

JSON Schema Validation

Beyond formatting, validating your JSON against a schema catches structural issues early:

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "required": ["name", "email"],
  "properties": {
    "name": {"type": "string", "minLength": 1},
    "email": {"type": "string", "format": "email"}
  }
}
Enter fullscreen mode Exit fullscreen mode

Performance Tip

For large JSON files (10MB+), avoid formatting in the browser. Use streaming parsers:

# Stream-process large JSON with jq
cat huge.json | jq '.users[] | select(.active == true)' > filtered.json
Enter fullscreen mode Exit fullscreen mode

Wrapping Up

JSON formatting is a small thing that makes a big difference in debugging speed and code review quality. Bookmark a good formatter, learn the common pitfalls, and your future self will thank you.

Resources:

Top comments (0)