JSON Basics Guide

What is JSON?

JSON (JavaScript Object Notation) is a lightweight, text-based data interchange format. Despite its name, JSON is language-independent and is used across many programming languages for data storage and transmission.

JSON Syntax Rules

  • Strings: Must be enclosed in double quotes "hello"
  • Numbers: Can be integers or decimals 42, 3.14
  • Booleans: true or false
  • Null: Represents empty value null
  • Objects: Key-value pairs in curly braces {"key": "value"}
  • Arrays: Ordered lists in square brackets [1, 2, 3]

Example JSON

{
  "name": "John Doe",
  "age": 30,
  "isActive": true,
  "address": {
    "street": "123 Main St",
    "city": "Anytown"
  },
  "hobbies": ["reading", "coding"],
  "spouse": null
}

Common JSON Errors

❌ Unquoted Keys

{name: "John"}

✅ Correct

{"name": "John"}

❌ Trailing Comma

{"name": "John",}

✅ Correct

{"name": "John"}

❌ Single Quotes

{'name': 'John'}

✅ Correct

{"name": "John"}

JSON Data Types

String

Text enclosed in double quotes. Supports escape sequences like \n, \", \\.

"Hello World"
"Line 1\nLine 2"
"Quote: \"Hello\""

Number

Integer or floating-point number. Can be negative and use scientific notation.

42
-17
3.14159
1.23e-4

Boolean

True or false values (lowercase only).

true
false

Object

Collection of key-value pairs enclosed in curly braces.

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

Array

Ordered list of values enclosed in square brackets.

[1, 2, 3, 4, 5]
["apple", "banana", "orange"]
[true, false, null]

Null

Represents an empty or missing value.

null

Best Practices

1. Use Consistent Formatting

Always use proper indentation and consistent spacing for better readability.

2. Validate Your JSON

Use tools like our JSON formatter to validate syntax before using in production.

3. Keep It Simple

Avoid deeply nested structures when possible. Flat structures are easier to work with.

4. Use Meaningful Key Names

Choose descriptive, consistent naming conventions for your JSON keys.

// Mobile menu functionality const hamburger = document.querySelector('.hamburger'); const navMenu = document.querySelector('.nav-menu'); if (hamburger) { hamburger.addEventListener('click', () => { hamburger.classList.toggle('active'); navMenu.classList.toggle('active'); }); }