Learn JSON

JSON stands for JavaScript Object Notation. It's a lightweight, text-based format for storing and transporting data that's easy for humans to read and write, and easy for machines to parse and generate.

Originally derived from JavaScript, JSON is now language-independent and supported by virtually every programming language. It has become the de facto standard for web APIs, configuration files, and data interchange between systems.

{
  "name": "John Doe",
  "age": 30,
  "email": "john@example.com",
  "isActive": true
}

JSON syntax is simple and strict. Understanding these rules will help you write valid JSON every time.

{
  name: "John",  // Missing quotes on key
  'age': 30,     // Single quotes
  "city": "NYC", // Trailing comma
}

{
  "name": "John",
  "age": 30,
  "city": "NYC"
}

JSON supports six data types. Understanding these is crucial for working with JSON effectively.

"name": "John Doe"

"age": 30, "price": 19.99

"isActive": true, "verified": false

"middleName": null

"person": {"name": "John", "age": 30}

"colors": ["red", "green", "blue"]

Objects are the foundation of JSON. They store data as key-value pairs wrapped in curly braces {}.

{
  "key": "value",
  "anotherKey": "anotherValue"
}

Real-World Examples

{
  "userId": 12345,
  "username": "johndoe",
  "email": "john@example.com",
  "firstName": "John",
  "lastName": "Doe",
  "age": 30,
  "isActive": true,
  "role": "admin"
}

{
  "productId": "ABC123",
  "name": "Wireless Headphones",
  "price": 99.99,
  "currency": "USD",
  "inStock": true,
  "rating": 4.5,
  "reviewCount": 1247
}

{
  "status": "success",
  "message": "Data retrieved successfully",
  "timestamp": "2026-01-01T12:00:00Z",
  "responseTime": 45
}

Arrays store ordered lists of values wrapped in square brackets []. Arrays can contain any JSON data type, including other arrays and objects.

["value1", "value2", "value3"]

Array Examples

{
  "fruits": [
    "apple",
    "banana",
    "orange",
    "grape"
  ]
}

{
  "scores": [
    95,
    87,
    92,
    78,
    100
  ]
}

{
  "data": [
    "text",
    42,
    true,
    null
  ]
}

{
  "users": [
    {"id": 1, "name": "Alice"},
    {"id": 2, "name": "Bob"},
    {"id": 3, "name": "Carol"}
  ]
}

Nested JSON means placing objects inside objects, or arrays inside arrays, to create complex hierarchical data structures. This is where JSON really shines for representing real-world data.

Objects in Objects

{
  "user": {
    "id": 12345,
    "profile": {
      "firstName": "Jane",
      "lastName": "Smith",
      "contact": {
        "email": "jane@example.com",
        "phone": "+1-555-0100",
        "address": {
          "street": "123 Main St",
          "city": "New York",
          "zipCode": "10001"
        }
      }
    },
    "preferences": {
      "theme": "dark",
      "notifications": true,
      "language": "en"
    }
  }
}

Arrays in Objects

{
  "company": "TechCorp",
  "employees": [
    {
      "id": 1,
      "name": "Alice Johnson",
      "role": "Engineer",
      "skills": ["JavaScript", "Python", "React"]
    },
    {
      "id": 2,
      "name": "Bob Williams",
      "role": "Designer",
      "skills": ["Figma", "Photoshop", "CSS"]
    }
  ],
  "departments": ["Engineering", "Design", "Marketing"]
}

Arrays in Arrays

{
  "matrix": [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ],
  "calendar": [
    ["Mon", "Tue", "Wed", "Thu", "Fri"],
    ["1", "2", "3", "4", "5"],
    ["8", "9", "10", "11", "12"]
  ]
}

Complex Real-World Example

{
  "orderId": "ORD-2026-001",
  "customer": {
    "id": 789,
    "name": "John Doe",
    "email": "john@example.com",
    "shippingAddress": {
      "street": "456 Oak Avenue",
      "city": "Los Angeles",
      "state": "CA",
      "zipCode": "90001",
      "country": "USA"
    }
  },
  "items": [
    {
      "productId": "P001",
      "name": "Laptop",
      "quantity": 1,
      "price": 999.99,
      "specifications": {
        "brand": "TechBrand",
        "model": "Pro 15",
        "ram": "16GB",
        "storage": "512GB SSD"
      }
    },
    {
      "productId": "P002",
      "name": "Mouse",
      "quantity": 2,
      "price": 29.99
    }
  ],
  "payment": {
    "method": "credit_card",
    "last4": "4242",
    "status": "completed"
  },
  "totals": {
    "subtotal": 1059.97,
    "tax": 84.80,
    "shipping": 15.00,
    "total": 1159.77
  },
  "status": "shipped",
  "tracking": {
    "carrier": "FedEx",
    "trackingNumber": "1234567890",
    "estimatedDelivery": "2026-01-05"
  }
}

Before JSON became popular, XML (eXtensible Markup Language) was the standard for data exchange. Let's compare them to understand why JSON won.

{
  "person": {
    "name": "John Doe",
    "age": 30,
    "email": "john@example.com",
    "active": true
  }
}

<?xml version="1.0"?>
<person>
  <name>John Doe</name>
  <age>30</age>
  <email>john@example.com</email>
  <active>true</active>
</person>

Detailed Comparison

Even experienced developers make JSON mistakes. Here are the most common errors and how to fix them.

{
  "name": "John",
  "age": 30,
}

{
  "name": "John",
  "age": 30
}

{
  'name': 'John',
  'age': 30
}

{
  "name": "John",
  "age": 30
}

{
  name: "John",
  age: 30
}

{
  "name": "John",
  "age": 30
}

{
  // This is a comment
  "name": "John",
  "age": 30
}

{
  "name": "John",
  "age": 30
}

{
  "name": "John",
  "middleName": undefined
}

{
  "name": "John",
  "middleName": null
}

{
  "name": "John",
  "greet": function() {
    return "Hello";
  }
}

{
  "name": "John",
  "greeting": "Hello"
}

{
  "person": {
    "name": "John",
    "age": 30
  }

{
  "person": {
    "name": "John",
    "age": 30
  }
}

{
  "name": "John",
  "name": "Jane"
}

{
  "firstName": "John",
  "lastName": "Jane"
}

Follow these industry-standard best practices to write clean, maintainable, and efficient JSON.

{
  "data": {
    "user": {
      "profile": {
        "address": {
          "primary": {
            "street": "..."
          }
        }
      }
    }
  }
}

{
  "userId": 123,
  "profileId": 456,
  "primaryAddress": {
    "street": "..."
  }
}

{
  "name": "John",
  "age": 30
}

{"name":"John","age":30}

{
  "age": "30",
  "price": "19.99",
  "isActive": 1
}

{
  "age": 30,
  "price": 19.99,
  "isActive": true
}

{
  "firstName": "John",
  "middleName": null,
  "lastName": "Doe"
}

{
  "firstName": "John",
  "lastName": "Doe"
}

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {"type": "string"},
    "age": {"type": "number"},
    "email": {"type": "string", "format": "email"}
  },
  "required": ["name", "email"]
}

{
  "user": {
    "name": "John",
    "email": "john@example.com"
  },
  "purchases": [
    {"id": 1, "product": "Laptop"},
    {"id": 2, "product": "Mouse"}
  ]
}

{
  "apiVersion": "1.0",
  "data": {
    "users": [...]
  }
}

JavaScript has native support for JSON. The JSON object provides two essential methods:parse() and stringify().

JSON.parse() - Convert String to Object

const jsonString = '{"name": "John", "age": 30}';
const obj = JSON.parse(jsonString);

console.log(obj.name);  // "John"
console.log(obj.age);   // 30

JSON.stringify() - Convert Object to String

const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);

console.log(jsonString);  
// '{"name":"John","age":30}'

// Pretty print with indentation
const pretty = JSON.stringify(obj, null, 2);
console.log(pretty);
// {
//   "name": "John",
//   "age": 30
// }

Fetching JSON from APIs

// Using fetch API
async function getUserData() {
  try {
    const response = await fetch('https://api.example.com/user/123');
    const data = await response.json(); // Automatically parses JSON
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

// Using fetch with manual parsing
fetch('https://api.example.com/user/123')
  .then(response => response.text())
  .then(text => {
    const data = JSON.parse(text);
    console.log(data);
  });

Error Handling

function safeParse(jsonString) {
  try {
    return JSON.parse(jsonString);
  } catch (error) {
    console.error('Invalid JSON:', error.message);
    return null;
  }
}

// Usage
const valid = safeParse('{"name": "John"}');  // Returns object
const invalid = safeParse('{name: John}');    // Returns null, logs error

Python's json module provides powerful tools for working with JSON data. It's part of the standard library, so no installation needed.

json.loads() - Parse JSON String

import json

json_string = '{"name": "John", "age": 30}'
data = json.loads(json_string)

print(data["name"])  # "John"
print(data["age"])   # 30

json.dumps() - Convert to JSON String

import json

data = {"name": "John", "age": 30}
json_string = json.dumps(data)

print(json_string)  
# '{"name": "John", "age": 30}'

# Pretty print with indentation
pretty = json.dumps(data, indent=2)
print(pretty)
# {
#   "name": "John",
#   "age": 30
# }

Reading from Files

import json

# Read JSON from file
with open('data.json', 'r') as file:
    data = json.load(file)  # Note: json.load() not loads()
    print(data)

# Write JSON to file
data = {"name": "John", "age": 30}
with open('output.json', 'w') as file:
    json.dump(data, file, indent=2)  # Note: json.dump() not dumps()

Type Conversion

JSON Schema is a vocabulary that allows you to annotate and validate JSON documents. It describes the structure of your JSON data, making APIs more reliable and self-documenting.

What is JSON Schema?

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "minLength": 1,
      "maxLength": 100
    },
    "age": {
      "type": "integer",
      "minimum": 0,
      "maximum": 150
    },
    "email": {
      "type": "string",
      "format": "email"
    }
  },
  "required": ["name", "email"]
}

Common Schema Properties

Real-World Example

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "username": {
      "type": "string",
      "minLength": 3,
      "maxLength": 20,
      "pattern": "^[a-zA-Z0-9_]+$"
    },
    "email": {
      "type": "string",
      "format": "email"
    },
    "password": {
      "type": "string",
      "minLength": 8,
      "pattern": "^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$"
    },
    "age": {
      "type": "integer",
      "minimum": 13,
      "maximum": 120
    }
  },
  "required": ["username", "email", "password"]
}

Most modern web APIs use JSON for data exchange. Understanding how to work with JSON APIs is essential for any developer.

RESTful API Response Format

{
  "status": "success",
  "data": {
    "users": [
      {"id": 1, "name": "Alice", "email": "alice@example.com"},
      {"id": 2, "name": "Bob", "email": "bob@example.com"}
    ],
    "total": 2,
    "page": 1
  },
  "message": "Users retrieved successfully",
  "timestamp": "2026-01-21T12:00:00Z"
}

Error Response Format

{
  "status": "error",
  "error": {
    "code": 400,
    "message": "Invalid request",
    "details": "Email field is required"
  },
  "timestamp": "2026-01-21T12:00:00Z"
}

Making API Requests

async function fetchUserData(userId) {
  try {
    const response = await fetch(`https://api.example.com/users/${userId}`);
    
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
    return null;
  }
}

import requests

def fetch_user_data(user_id):
    try:
        response = requests.get(f'https://api.example.com/users/{user_id}')
        response.raise_for_status()  # Raises exception for bad status
        return response.json()
    except requests.exceptions.RequestException as e:
        print(f'Error fetching data: {e}')
        return None