How to Read Nested JSON Data

To read nested JSON in JavaScript, use dot notation: data.user.address.city. For array elements use bracket notation: data.users[0].name. Use optional chaining (data?.user?.address?.city) to safely access deep values without throwing if any level is missing. Paste deeply nested JSON into the JSON Formatter first to visualize the structure with collapsible tree view.

Understanding JSON structure

JSON has two container types: objects (key-value pairs, denoted by {}) and arrays (ordered lists, denoted by []). Nesting happens when an object's value is another object or array. There is no limit to how many levels deep this can go.

{
  "order": {
    "id": "ORD-1042",
    "customer": {
      "name": "Alice Chen",
      "address": {
        "city": "Portland",
        "zip": "97201"
      }
    },
    "items": [
      { "product": "Keyboard", "qty": 1, "price": 89.99 },
      { "product": "Mouse",    "qty": 2, "price": 34.50 }
    ],
    "total": 158.99
  }
}

In this structure, order contains a nested customer object, which itself contains a nested address object. items is an array of objects. To read this comfortably, you need to understand the path to each value.

Step 1: Format it first

Minified or inconsistently indented JSON is hard to read. Before trying to understand a nested structure, paste it into a formatter. Consistent 2-space indentation makes the depth of each level immediately visible. Each additional indentation level represents one level deeper in the hierarchy.

Step 2: Use dot notation to describe paths

Dot notation is the standard way to describe a path through a JSON structure. Each key is separated by a dot. Array elements use bracket notation with an index:

order.id                    → "ORD-1042"
order.customer.name         → "Alice Chen"
order.customer.address.city → "Portland"
order.items[0].product      → "Keyboard"
order.items[1].price        → 34.50
order.total                 → 158.99

Reading dot notation paths out loud ("order, then customer, then address, then city") helps you trace which key at each level leads to your target value.

Step 3: Access nested values in code

In JavaScript, you access nested values using dot or bracket notation on the parsed object:

const data = JSON.parse(jsonString);

// Dot notation
const city = data.order.customer.address.city;

// Bracket notation (useful when key is a variable or has special characters)
const city = data["order"]["customer"]["address"]["city"];

// Array elements
const firstItem = data.order.items[0];
const secondPrice = data.order.items[1].price;

// Optional chaining — returns undefined instead of throwing if a level is missing
const zip = data?.order?.customer?.address?.zip;

The optional chaining operator (?.) is important for real-world JSON where not every field is guaranteed to be present in every response.

Step 4: Navigate arrays of objects

Arrays inside JSON objects are common — a list of results, a collection of items, a set of tags. To work with them:

const items = data.order.items;

// Access all items
items.forEach(item => console.log(item.product, item.price));

// Find a specific item
const keyboard = items.find(item => item.product === "Keyboard");

// Get all product names
const names = items.map(item => item.product); // ["Keyboard", "Mouse"]

// Filter items above a price
const expensive = items.filter(item => item.price > 50); // [{ product: "Keyboard", ... }]

Common navigation mistakes

• Accessing a property on an array — If a key's value is an array, you cannot access a nested property directly. data.order.items.product returns undefined. You must first select an array element: data.order.items[0].product.
• Off-by-one in arrays — JSON arrays use zero-based indexing. The first element is index [0], not [1].
• Missing null checks — If any level in a path is null or undefined, accessing a deeper property throws a TypeError. Always use optional chaining or explicit null checks for data you do not control.
• Case sensitivity — JSON keys are case-sensitive. data.Order and data.order are different keys.

Using a formatter to navigate visually

For very large or complex JSON, reading in a text editor is inefficient. A JSON formatter with tree view lets you collapse and expand individual objects and arrays, which makes it much faster to find what you need without scrolling through hundreds of lines. If you receive a large API response and need to understand its structure, formatting it first is always the right first step.