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
}
}
}