JSON Arrays and Objects: A Visual Guide

TL;DR

Objects { } — Key-value pairs, access by name
Arrays [ ] — Ordered lists, access by index
Objects = "thing with properties" (a person, a config)
Arrays = "list of things" (users, items, scores)
They nest inside each other infinitely

Two Building Blocks

JSON has two ways to group data: objects and arrays. That's it. Once you understand these two, you understand JSON structure.

Think of it this way:

Object = A filing cabinet with labeled drawers
Array = A numbered list on a clipboard

JSON data structure: Objects use curly braces , Arrays use square brackets [ ]

Objects: Named Storage

Objects use curly braces { } and store data as key-value pairs. Each piece of data has a name (the key).

object-example.json

json

{
  "name": "Alice",
  "age": 28,
  "email": "alice@example.com",
  "isPremium": true
}

Key Points About Objects

Keys must be strings in double quotes
Order doesn't matter (technically unordered)
Keys must be unique within the same object
Access by key name: user.name or user["name"]

When to Use Objects

Use objects when your data represents a thing with properties:

A user (name, email, age)
A product (title, price, description)
A configuration (settings, options, flags)
A response (status, data, error)

real-object.json

json

{
  "product": {
    "id": "prod_123",
    "name": "Wireless Mouse",
    "price": 29.99,
    "inStock": true,
    "specs": {
      "color": "black",
      "battery": "AA",
      "wireless": true
    }
  }
}

Arrays: Ordered Lists

Arrays use square brackets [ ] and store ordered lists of values. Items are accessed by their position (index), starting at 0.

array-example.json

json

{
  "fruits": ["apple", "banana", "cherry"],
  "numbers": [1, 2, 3, 4, 5],
  "mixed": ["text", 42, true, null]
}

Key Points About Arrays

Order matters — Position is meaningful
Duplicates allowed — Same value can appear multiple times
Can hold any type — Even mixed types (though not recommended)
Access by index: fruits[0] returns "apple"

When to Use Arrays

Use arrays when you have a collection of items:

A list of users
Search results
Tags or categories
Steps in a process
Historical data points

real-array.json

json

{
  "searchResults": [
    { "id": 1, "title": "First result", "score": 0.95 },
    { "id": 2, "title": "Second result", "score": 0.87 },
    { "id": 3, "title": "Third result", "score": 0.72 }
  ]
}

Nesting: Objects in Arrays in Objects

Real-world JSON is usually nested. Objects contain arrays. Arrays contain objects. It's boxes inside boxes.

Array of Objects

The most common pattern — a list where each item has properties:

array-of-objects.json

json

{
  "users": [
    {
      "id": 1,
      "name": "Alice",
      "role": "admin"
    },
    {
      "id": 2,
      "name": "Bob",
      "role": "user"
    }
  ]
}

Access: data.users[0].name → "Alice"

Object with Arrays

An object with multiple list properties:

object-with-arrays.json

json

{
  "playlist": {
    "name": "Road Trip Mix",
    "songs": ["Song A", "Song B", "Song C"],
    "tags": ["driving", "summer", "upbeat"]
  }
}

Deep Nesting

Structures can nest multiple levels deep:

deep-nesting.json

json

{
  "company": {
    "name": "TechCorp",
    "departments": [
      {
        "name": "Engineering",
        "teams": [
          {
            "name": "Frontend",
            "members": [
              { "name": "Alice", "level": "Senior" },
              { "name": "Bob", "level": "Junior" }
            ]
          }
        ]
      }
    ]
  }
}

Access: data.company.departments[0].teams[0].members[1].name → "Bob"

Tip: While deep nesting is valid, it makes data harder to work with. If you're going beyond 3-4 levels, consider flattening your structure.

Common Data Patterns

Pattern 1: API Response with Results

api-response.json

json

{
  "status": "success",
  "data": {
    "items": [
      { "id": 1, "name": "Item A" },
      { "id": 2, "name": "Item B" }
    ],
    "pagination": {
      "page": 1,
      "perPage": 10,
      "total": 42
    }
  }
}

Pattern 2: Configuration File

config.json

json

{
  "app": {
    "name": "My App",
    "version": "1.0.0"
  },
  "server": {
    "port": 3000,
    "host": "localhost"
  },
  "features": {
    "darkMode": true,
    "analytics": false,
    "experiments": ["feature-a", "feature-b"]
  }
}

Pattern 3: Form Data

form-data.json

json

{
  "form": {
    "fields": [
      {
        "name": "email",
        "type": "email",
        "required": true,
        "validation": {
          "pattern": "^[a-z@.]+$",
          "message": "Invalid email"
        }
      },
      {
        "name": "age",
        "type": "number",
        "required": false,
        "validation": {
          "min": 0,
          "max": 120
        }
      }
    ]
  }
}

Accessing Nested Data (JavaScript)

access-examples.js

javascript

const data = {
  users: [
    { name: "Alice", skills: ["JS", "Python"] },
    { name: "Bob", skills: ["Go", "Rust"] }
  ]
};

// Access nested values
data.users               // Array of user objects
data.users[0]            // First user object
data.users[0].name       // "Alice"
data.users[0].skills[1]  // "Python"
data.users[1].skills     // ["Go", "Rust"]

// Safe access with optional chaining (?.)
data.users[5]?.name      // undefined (not error)
data.missing?.value      // undefined (not error)

// Destructuring
const { users } = data;
const [firstUser, secondUser] = users;
const { name, skills } = firstUser;

Common Operations

manipulate.js

javascript

// Add to array
data.users.push({ name: "Charlie", skills: ["Java"] });

// Remove from array
data.users = data.users.filter(u => u.name !== "Bob");

// Find in array
const alice = data.users.find(u => u.name === "Alice");

// Update object property
data.users[0].name = "Alice Smith";

// Add property to object
data.users[0].email = "alice@example.com";

// Map over array
const names = data.users.map(u => u.name);

How to Decide: Object or Array?

Ask yourself these questions:

Question	If Yes...
Do items have a natural order?	Use an array
Will you access by index/position?	Use an array
Are there multiple items of the same type?	Use an array
Do items need named identifiers?	Use an object
Is it a single "thing" with properties?	Use an object
Will you look up by a key/name?	Use an object

Common Mistakes

Mistake 1: Using Array When Object Makes Sense

mistake-array.json

json

// ❌ Bad - settings as array of key-value pairs
{
  "settings": [
    { "key": "theme", "value": "dark" },
    { "key": "fontSize", "value": 14 }
  ]
}

// ✅ Good - settings as an object
{
  "settings": {
    "theme": "dark",
    "fontSize": 14
  }
}

Mistake 2: Numbered Keys in Object

mistake-numbered.json

json

// ❌ Bad - numbered keys (this should be an array!)
{
  "items": {
    "0": "First",
    "1": "Second",
    "2": "Third"
  }
}

// ✅ Good - use an actual array
{
  "items": ["First", "Second", "Third"]
}

Practice with real JSON! Use our JSON tools to explore and modify JSON structures in real-time.

FAQ

Can an array contain different types?

Yes, but it's not recommended. [1, "text", true] is valid JSON but makes the data harder to work with. Keep arrays homogeneous.

What's the maximum nesting depth?

JSON spec doesn't define a limit, but parsers typically handle hundreds of levels. If you're worried about depth, your data model probably needs rethinking.

Can object keys be numbers?

Keys must be strings, but "123" is a valid key. They'll be stored and compared as strings, not numbers.

What is JSON? — Start with the basics
Parse JSON in JavaScript — Work with JSON data
JSONPath Tutorial — Query complex structures

JSON Arrays and Objects: A Visual Guide

TL;DR

Two Building Blocks

Objects: Named Storage

Key Points About Objects

When to Use Objects

Arrays: Ordered Lists

Key Points About Arrays

When to Use Arrays

Nesting: Objects in Arrays in Objects

Array of Objects

Object with Arrays

Deep Nesting

Common Data Patterns

Pattern 1: API Response with Results

Pattern 2: Configuration File

Pattern 3: Form Data

Accessing Nested Data (JavaScript)

Common Operations

How to Decide: Object or Array?

Common Mistakes

Mistake 1: Using Array When Object Makes Sense

Mistake 2: Numbered Keys in Object

FAQ

Can an array contain different types?

What's the maximum nesting depth?

Can object keys be numbers?

About the Author

Adam Tse

TL;DR

Two Building Blocks

Objects: Named Storage

Key Points About Objects

When to Use Objects

Arrays: Ordered Lists

Key Points About Arrays

When to Use Arrays

Nesting: Objects in Arrays in Objects

Array of Objects

Object with Arrays

Deep Nesting

Common Data Patterns

Pattern 1: API Response with Results

Pattern 2: Configuration File

Pattern 3: Form Data

Accessing Nested Data (JavaScript)

Common Operations

How to Decide: Object or Array?

Common Mistakes

Mistake 1: Using Array When Object Makes Sense

Mistake 2: Numbered Keys in Object

FAQ

Can an array contain different types?

What's the maximum nesting depth?

Can object keys be numbers?

Related Articles

About the Author

Adam Tse