```json

TL;DR

JSON (JavaScript Object Notation) is a lightweight, human-readable format for storing and exchanging data. It's built on two basic structures: name/value pairs and ordered lists of values. You'll find it everywhere in web development for sending data between a server and a web application.

1. The Mental Model

Think of JSON as a way to write down information neatly, similar to how you might write notes on an index card. You have labels for things (like "name" or "age") and then their actual values (like "Alice" or 30). You can also group related information together or list multiple items.

2. The Core Material

JSON is incredibly simple, relying on just two fundamental data structures:

• Objects: Represented by curly braces {}. These are collections of key-value pairs, where keys are strings (always in double quotes) and values can be any JSON data type.
• Arrays: Represented by square brackets []. These are ordered lists of values.

JSON Data Types

Photo by RealToughCandy.com on Pexels

JSON supports a limited set of data types for its values:

1. String: Text, enclosed in double quotes. E.g., "hello".
2. Number: Integers or floating-point numbers. E.g., 123, 3.14.
3. Boolean: true or false.
4. Null: Represents an absent or empty value. null.
5. Object: A nested JSON object {}.
6. Array: A nested JSON array [].

Here's how these types can be combined:

graph TD
    A["JSON Value"] --> B["String"]
    A --> C["Number"]
    A --> D["Boolean"]
    A --> E["Null"]
    A --> F["Object"]
    A --> G["Array"]

    F --> H["Key-Value Pairs"]
    G --> I["List of Values"]
    H --> J["String (Key)"]
    H --> K["JSON Value (Value)"]
    I --> L["JSON Value"]

Basic Syntax Rules

Photo by Pixabay on Pexels

• Keys must be strings: Always enclosed in double quotes.
• Values are separated by a colon: key: value.
• Key-value pairs are separated by a comma: { "key1": "value1", "key2": "value2" }.
• Array elements are separated by a comma: [ "item1", "item2" ].
• Whitespace doesn't matter for parsing, but it improves readability.

Example JSON Structure

Photo by RealToughCandy.com on Pexels

{
  "userName": "Alice",
  "age": 30,
  "isStudent": false,
  "courses": [
    "History 101",
    "Math 202",
    "Physics 303"
  ],
  "address": {
    "street": "123 Main St",
    "city": "Anytown",
    "zipCode": "12345"
  },
  "contactNumber": null
}

In this example:
* userName, age, isStudent, courses, address, and contactNumber are keys.
* "Alice" is a string value.
* 30 is a number value.
* false is a boolean value.
* courses holds an array of strings.
* address holds another JSON object.
* contactNumber is null.

3. Worked Example

Let's say you're building a simple app to manage a music playlist. You want to represent a single song with its title, artist, duration, and whether it's a favorite.

Here's how you could represent this song using JSON:

{
  "title": "Bohemian Rhapsody",
  "artist": "Queen",
  "durationSeconds": 354,
  "isFavorite": true,
  "genre": "Rock",
  "album": {
    "name": "A Night at the Opera",
    "releaseYear": 1975
  },
  "tags": ["classic", "anthem"]
}

In this JSON object:
* "title", "artist", and "genre" are string values.
* "durationSeconds" is a number.
* "isFavorite" is a boolean.
* "album" is a nested JSON object with its own name (string) and releaseYear (number).
* "tags" is an array of strings.

This single structure compactly describes all the relevant information about the song.

4. Key Takeaways

• JSON is a standard, lightweight text format for data exchange.
• It's easy for humans to read and write, and easy for machines to parse and generate.
• The two main structures are objects (key-value pairs in {}) and arrays (ordered lists in []).
• Keys must always be strings enclosed in double quotes.
• Values can be strings, numbers, booleans, null, other objects, or other arrays.
• It's widely used in web APIs to send data between servers and web/mobile applications.
• JSON doesn't include functions or comments; it's purely for data.

Common Mistakes to Avoid:
- Forgetting double quotes around keys: {"name": "Alice"} is correct, {name: "Alice"} is not valid JSON.
- Using single quotes instead of double quotes: All strings (keys and string values) must use "".
- Trailing commas: You can't have a comma after the last item in an object or array.
- {"a": 1, "b": 2,} is invalid.
- [1, 2, 3,] is invalid.
- Missing commas between key-value pairs or array elements.
- Mismatched braces/brackets: Make sure every { has a } and every [ has a ].

5. Now Try It

Create a JSON object that represents a book. It should include the book's title (string), author (string), publicationYear (number), an array of genres (strings), and a boolean isAvailable status. Add a nested object called publisher with its name (string) and country (string).

What success looks like: You'll have a valid JSON string that clearly represents all the book's details, following all the syntax rules, and you can paste it into an online JSON validator (like jsonlint.com) without errors.