JSON Objects

Understanding JavaScript Object Notation Objects

📦 What are JSON Objects?

JSON Objects are collections of key-value pairs, similar to JavaScript objects. They store data in a structured, readable format that's perfect for data exchange between applications.


// Simple JSON Object
{
    "name": "John",
    "age": 25,
    "city": "New York"
}
                                    

JSON Object Structure

🔑

Keys

Always strings in double quotes

"name": "value"
💎

Values

Can be strings, numbers, booleans, arrays, or objects

"age": 25
"active": true
🏗️

Nested Objects

Objects can contain other objects

"address": {
  "street": "123 Main St"
}
📝

Syntax Rules

Strict formatting requirements

{ "key": "value" }

🔹 Basic JSON Object Example

Here's a simple JSON object representing a person:

// Person JSON Object
{
    "firstName": "Alice",
    "lastName": "Johnson",
    "age": 28,
    "isEmployed": true,
    "salary": null
}

Key Points:

  • Keys must be strings in double quotes
  • Values can be strings, numbers, booleans, null, arrays, or objects
  • No trailing commas allowed
  • No comments allowed in JSON

🔹 Working with JSON Objects in JavaScript

Convert between JSON strings and JavaScript objects:

// JavaScript object
const person = {
    name: "Bob",
    age: 30,
    city: "Boston"
};

// Convert to JSON string
const jsonString = JSON.stringify(person);
console.log(jsonString);
// Output: {"name":"Bob","age":30,"city":"Boston"}

// Convert JSON string back to object
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Output: Bob

Console Output:

{"name":"Bob","age":30,"city":"Boston"}

Bob

🔹 Nested JSON Objects

JSON objects can contain other objects for complex data structures:

// Complex JSON Object
{
    "student": {
        "personalInfo": {
            "name": "Emma",
            "age": 22,
            "email": "[email protected]"
        },
        "academic": {
            "major": "Computer Science",
            "gpa": 3.8,
            "courses": ["JavaScript", "Python", "Database"]
        },
        "address": {
            "street": "456 Oak Ave",
            "city": "Seattle",
            "zipCode": "98101"
        }
    }
}
// Accessing nested data
const data = JSON.parse(jsonString);
console.log(data.student.personalInfo.name); // Emma
console.log(data.student.academic.courses[0]); // JavaScript
console.log(data.student.address.city); // Seattle

🔹 Common JSON Object Patterns

Typical structures you'll encounter:

🔸 User Profile

{
    "id": 12345,
    "username": "johndoe",
    "profile": {
        "displayName": "John Doe",
        "avatar": "https://example.com/avatar.jpg",
        "bio": "Web developer from California"
    },
    "preferences": {
        "theme": "dark",
        "notifications": true,
        "language": "en"
    },
    "lastLogin": "2024-01-15T10:30:00Z"
}

🔸 Product Information

{
    "product": {
        "id": "PROD-001",
        "name": "Wireless Headphones",
        "price": 99.99,
        "inStock": true,
        "specifications": {
            "color": "Black",
            "weight": "250g",
            "batteryLife": "20 hours"
        },
        "reviews": {
            "average": 4.5,
            "count": 128
        }
    }
}

🧠 Test Your Knowledge

Which of the following is a valid JSON object?