I got an API response the other day that looked like this:
{
"user": {
"profile": {
"personal": {
"name": "John",
"email": "john@example.com"
},
"settings": {
"theme": "dark",
"notifications": true
}
}
}
}
I needed to get the user's name. Simple, right? I tried data.name. Nothing. I tried data.user.name. Still nothing. Finally, I realized: it's nested three levels deep. I needed data.user.profile.personal.name.
That's when I learned that nested JSON isn't hard—you just need to know how to navigate it. Once you understand the path, accessing nested data becomes straightforward.
Let me show you how to work with nested JSON, from simple examples to complex structures.
What is Nested JSON?
Nested JSON means JSON objects or arrays inside other JSON objects or arrays. Think of it like Russian nesting dolls—objects inside objects inside objects.
Simple (flat) JSON:
{
"name": "John",
"age": 30,
"email": "john@example.com"
}
Nested JSON:
{
"user": {
"name": "John",
"address": {
"street": "123 Main St",
"city": "New York"
}
}
}
The address object is nested inside the user object. That's nesting.
Understanding the Path
To access nested data, you need to follow the path. Think of it like directions:
To get to the street:
- Start with
data(the root) - Go into
user - Go into
address - Get
street
In code, that's: data.user.address.street
Each . means "go into" or "access the property of."
Accessing Nested Data in JavaScript
Here's how to access nested data in JavaScript:
Simple Nested Object
const data = {
user: {
name: "John",
age: 30
}
};
// Access nested property
console.log(data.user.name); // "John"
console.log(data.user.age); // 30
Deeper Nesting
const data = {
user: {
profile: {
personal: {
name: "John",
email: "john@example.com"
}
}
}
};
// Access deeply nested property
console.log(data.user.profile.personal.name); // "John"
With Arrays
When arrays are involved, use bracket notation:
const data = {
users: [
{ name: "John", age: 30 },
{ name: "Jane", age: 25 }
]
};
// Access first user's name
console.log(data.users[0].name); // "John"
// Access second user's age
console.log(data.users[1].age); // 25
Mixed Nesting
Real-world JSON often mixes objects and arrays:
const data = {
company: {
employees: [
{
name: "John",
department: {
name: "Engineering",
location: "New York"
}
}
]
}
};
// Access nested data in array
console.log(data.company.employees[0].department.location); // "New York"
Accessing Nested Data in Python
Python uses similar syntax:
Simple Nested Object
data = {
"user": {
"name": "John",
"age": 30
}
}
# Access nested property
print(data["user"]["name"]) # "John"
print(data["user"]["age"]) # 30
# Or with dot notation (if using a library like types.SimpleNamespace)
Deeper Nesting
data = {
"user": {
"profile": {
"personal": {
"name": "John",
"email": "john@example.com"
}
}
}
}
# Access deeply nested property
print(data["user"]["profile"]["personal"]["name"]) # "John"
With Arrays
data = {
"users": [
{"name": "John", "age": 30},
{"name": "Jane", "age": 25}
]
}
# Access first user's name
print(data["users"][0]["name"]) # "John"
Common Patterns
Here are patterns you'll use all the time:
Pattern 1: Safe Access (Optional Chaining)
Sometimes properties might not exist. Use optional chaining to avoid errors:
JavaScript:
// Safe access - won't crash if property doesn't exist
const name = data?.user?.profile?.name;
// Or with default value
const name = data?.user?.profile?.name || "Unknown";
Python:
# Safe access
name = data.get("user", {}).get("profile", {}).get("name", "Unknown")
Pattern 2: Checking if Property Exists
Before accessing, check if it exists:
JavaScript:
if (data.user && data.user.profile && data.user.profile.name) {
console.log(data.user.profile.name);
}
Python:
if "user" in data and "profile" in data["user"] and "name" in data["user"]["profile"]:
print(data["user"]["profile"]["name"])
Pattern 3: Looping Through Nested Arrays
const data = {
users: [
{ name: "John", hobbies: ["reading", "coding"] },
{ name: "Jane", hobbies: ["traveling", "photography"] }
]
};
// Loop through users
data.users.forEach(user => {
console.log(user.name);
// Loop through hobbies
user.hobbies.forEach(hobby => {
console.log(` - ${hobby}`);
});
});
Pattern 4: Finding Data in Nested Structures
const data = {
users: [
{ id: 1, name: "John", email: "john@example.com" },
{ id: 2, name: "Jane", email: "jane@example.com" }
]
};
// Find user by ID
const user = data.users.find(u => u.id === 2);
console.log(user.name); // "Jane"
Real-World Examples
Let me show you some real scenarios:
Example 1: API Response
{
"status": "success",
"data": {
"user": {
"id": 123,
"name": "John",
"address": {
"street": "123 Main St",
"city": "New York",
"zip": "10001"
}
}
}
}
Accessing the data:
