JSON Formatting and Validation Guide

JSON (JavaScript Object Notation) is the lingua franca of modern web development. APIs return it, configuration files use it, databases store it, and frontend apps consume it.

Despite its simplicity, JSON can cause subtle problems. A missing comma breaks parsing. An unquoted key fails silently. Deeply nested structures become unreadable. Knowing how to work with JSON efficiently is a core developer skill.

JSON Basics

Valid JSON follows strict rules:

{
  "string": "hello",
  "number": 42,
  "float": 3.14,
  "boolean": true,
  "null": null,
  "array": [1, 2, 3],
  "object": {
    "nested": "value"
  }
}

Key Rules

• Keys must be quoted: {"key": "value"} ✓ {key: "value"} ✗
• Strings must use double quotes: "string" ✓ 'string' ✗
• No trailing commas: [1, 2, 3] ✓ [1, 2, 3,] ✗
• No comments: Pure data, no // or /* */
• No undefined: Use null instead

Common JSON Errors

Missing or Extra Commas

// Missing comma after "name"
{
  "name": "John"
  "age": 30
}

// Extra trailing comma
{
  "name": "John",
  "age": 30,
}

Unquoted Keys

// Invalid - unquoted key
{
  name: "John"
}

// Valid
{
  "name": "John"
}

Single Quotes

// Invalid - single quotes
{
  'name': 'John'
}

// Valid
{
  "name": "John"
}

Unescaped Characters

// Invalid - unescaped quote in string
{
  "message": "He said "hello""
}

// Valid
{
  "message": "He said \"hello\""
}

JavaScript vs JSON

JavaScript object literal syntax is similar but not identical:

// Valid JavaScript, invalid JSON
const obj = {
  name: 'John', // unquoted key, single quotes
  age: 30, // trailing comma OK in JS
  greeting: undefined, // undefined not valid in JSON
};

Formatting (Pretty Printing)

Minified JSON is hard to read:

{ "name": "John", "address": { "street": "123 Main", "city": "NYC" }, "tags": ["dev", "js"] }

Formatted JSON is readable:

{
  "name": "John",
  "address": {
    "street": "123 Main",
    "city": "NYC"
  },
  "tags": ["dev", "js"]
}

Command Line

# Format a file
cat data.json | python -m json.tool

# Or with jq
cat data.json | jq '.'

In Code

// JavaScript
const formatted = JSON.stringify(obj, null, 2);

# Python
import json
formatted = json.dumps(obj, indent=2)

Our JSON Formatter

The JSON Formatter provides:

• Paste or type JSON
• Instant formatting with configurable indentation
• Validation with error messages and line numbers
• Minification option
• Statistics (keys, values, nesting depth)
• Copy button for quick use

It’s free and runs entirely in your browser.

Validation

Validation catches errors before they cause runtime problems.

JavaScript

function isValidJSON(str) {
  try {
    JSON.parse(str);
    return true;
  } catch (e) {
    return false;
  }
}

Error Messages

Good tools tell you exactly what’s wrong:

Unexpected token } at position 45
Line 3, Column 12: Expected comma or closing brace

Our JSON Formatter provides line numbers and clear error messages for quick debugging.

Working with Large JSON

Performance Considerations

Large JSON files (10MB+) can cause:

• Slow parsing
• Memory issues
• Hanging editors

Options:

• Stream parsing (process incrementally)
• Process server-side
• Split into smaller files

Readability at Scale

Deep nesting becomes unmanageable:

{
  "level1": {
    "level2": {
      "level3": {
        "level4": {
          "level5": "too deep"
        }
      }
    }
  }
}

Consider:

• Flattening structure
• Using references instead of nesting
• Different data format for complex hierarchies

JSON Schema

For validating JSON structure (not just syntax), use JSON Schema:

{
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "age": { "type": "integer", "minimum": 0 }
  },
  "required": ["name"]
}

This ensures JSON matches your expected format—useful for APIs and configuration.

JSON in Different Contexts

API Responses

// Fetching JSON from an API
const response = await fetch('/api/users');
const data = await response.json();

Common issues:

• Server returns HTML error page (parse fails)
• Unexpected null values
• Date strings need parsing

Configuration Files

// package.json
{
  "name": "my-package",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc"
  }
}

Many tools use JSON for configuration:

• package.json (npm)
• tsconfig.json (TypeScript)
• .eslintrc.json (ESLint)
• settings.json (VS Code)

Structured Data (JSON-LD)

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "My Article"
  }
</script>

JSON-LD embeds structured data in HTML for SEO. Validate with our Schema Validator.

JSON Alternatives

When JSON isn’t ideal:

YAML

More human-readable for configuration:

name: John
address:
  street: 123 Main
  city: NYC
tags:
  - dev
  - js

Supports comments, less syntax noise. Used by Kubernetes, Docker Compose, etc.

TOML

Configuration-focused:

[database]
host = "localhost"
port = 5432

Used by Rust’s Cargo, Hugo, etc.

Protocol Buffers / MessagePack

Binary formats for performance-critical applications. Not human-readable but much smaller and faster.

Debugging Tips

Use a Good Editor

Editors with JSON support highlight:

• Syntax errors
• Matching brackets
• Nested structure

VS Code, Sublime Text, and most modern editors handle this well.

Validate Early

Don’t wait for runtime errors. Validate JSON:

• Before committing
• In CI pipelines
• Before API deployments

Log Full Objects

When debugging, log the actual JSON:

console.log(JSON.stringify(data, null, 2));

This often reveals issues not visible in browser object viewers.

Take Action

1. Bookmark our JSON Formatter for quick formatting and validation
2. Set up editor JSON validation
3. Consider JSON Schema for critical data structures
4. Establish team conventions for JSON formatting

For help with API development or data architecture, reach out.