JSON

Basic Syntax

{
  "key": "value",
  "number": 42,
  "boolean": true,
  "null": null,
  "array": [1, 2, 3],
  "object": {
    "nested": "value"
  }
}

Data Types

{
  "string": "Hello, World!",
  "number": 123.45,
  "integer": 42,
  "boolean": true,
  "null": null,
  "array": ["item1", "item2"],
  "object": {"key": "value"}
}

Objects

{
  "user": {
    "id": 1,
    "name": "Alice",
    "email": "alice@example.com",
    "isActive": true,
    "roles": ["admin", "editor"]
  }
}

Arrays

{
  "users": [
    {"id": 1, "name": "Alice"},
    {"id": 2, "name": "Bob"},
    {"id": 3, "name": "Charlie"}
  ],
  "tags": ["javascript", "json", "api"],
  "matrix": [[1, 2], [3, 4]]
}

Nested Structures

{
  "company": {
    "name": "Tech Corp",
    "departments": [
      {
        "name": "Engineering",
        "employees": [
          {
            "id": 1,
            "name": "Alice",
            "position": "Senior Developer"
          }
        ]
      }
    ]
  }
}

Common Patterns

API Response

{
  "status": "success",
  "data": {
    "users": [
      {"id": 1, "name": "Alice"},
      {"id": 2, "name": "Bob"}
    ]
  },
  "meta": {
    "total": 2,
    "page": 1,
    "perPage": 10
  }
}

Configuration File

{
  "app": {
    "name": "MyApp",
    "version": "1.0.0",
    "port": 3000
  },
  "database": {
    "host": "localhost",
    "port": 5432,
    "name": "mydb"
  },
  "features": {
    "auth": true,
    "cache": false
  }
}

Error Response

{
  "status": "error",
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Invalid email format",
    "field": "email"
  }
}

Best Practices

{
  "goodPractices": {
    "useDoubleQuotes": "Always use double quotes for strings",
    "noTrailingCommas": "Last item should not have a comma",
    "consistentNaming": "use_snake_case or camelCase consistently",
    "avoidComments": "JSON doesn't support comments"
  }
}

Special Characters

{
  "escaping": "Use backslash to escape: \" \\ \/ \b \f \n \r \t",
  "unicode": "Unicode characters: \u00A9 for ©",
  "quotes": "Strings must use \"double quotes\"",
  "numbers": "No leading zeros: 42, not 042"
}

JSONC (JSON with Comments)

JSONC is JSON with comment support, commonly used in VS Code configuration files.

{
  // Single-line comment
  "name": "MyApp",
  
  /* 
   * Multi-line comment
   * Used for detailed explanations
   */
  "version": "1.0.0",
  
  "scripts": {
    "dev": "vite",      // Start development server
    "build": "vite build"  /* Production build */
  }
}

VS Code Configuration

// .vscode/settings.json
{
  // Editor settings
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  
  // Format on save
  "editor.formatOnSave": true,
  
  /* 
   * Language-specific settings
   */
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

TypeScript Configuration

// tsconfig.json
{
  "compilerOptions": {
    // Module resolution
    "module": "ESNext",
    "moduleResolution": "bundler",
    
    // Strict type checking
    "strict": true,
    "noImplicitAny": true,  // Require explicit types
    
    /* Path mapping for imports */
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

JSON5

JSON5 is a more human-friendly JSON extension with additional features.

{
  // Comments allowed
  unquoted: 'and single quotes work',
  trailingComma: 'is okay',
  
  /* Multi-line strings */
  multiline: 'This is a \
very long \
string',
  
  // Numbers
  hexadecimal: 0xdecaf,
  leadingDecimal: .5,
  trailingDecimal: 5.,
  positiveSign: +1,
  infinity: Infinity,
  notANumber: NaN,
  
  // Trailing comma is fine
}

JSON5 Features

{
  // Unquoted object keys
  name: 'Alice',
  age: 30,
  
  // Single and double quotes
  greeting: 'Hello',
  farewell: "Goodbye",
  
  // Trailing commas
  colors: [
    'red',
    'green',
    'blue',  // No error!
  ],
  
  // Multiline strings with backslash
  description: 'This is a long description \
                that spans multiple lines \
                for better readability',
  
  // Special number values
  values: {
    hex: 0xFF,
    decimal: .5,
    infinity: Infinity,
    negative: -Infinity,
    nan: NaN,
  },
}

JSON5 Configuration Example

// config.json5
{
  // Application settings
  app: {
    name: 'MyApp',
    version: '2.0.0',
    debug: true,  // Enable debug mode
  },
  
  // Database configuration
  database: {
    host: 'localhost',
    port: 5432,
    credentials: {
      user: 'admin',
      // Password should be in env vars
      passwordEnv: 'DB_PASSWORD',
    },
  },
  
  /* Feature flags */
  features: {
    authentication: true,
    caching: false,
    analytics: true,  // trailing comma is fine
  },
}

Format Comparison