Understanding JSON

JSON is everywhere. Every time you update a setting on your phone, fill in an online form, or check the weather, JSON is working behind the scenes. It’s a simple way to organise information that both humans and computers can read. You don’t need to be a programmer to understand it. In fact, you already think this way — you just don’t know it yet.

At its core, JSON is just a list of key:value pairs — a label, a colon, then the data. For example, name: "Sarah" means the key is name and the value is Sarah.

You Already Think in JSON

When you save a contact in your phone, you’re not just typing random text. You’re organising information into categories:

• Name: Sarah Chen
• Phone: 0412 345 678
• Email: sarah@example.com

Each piece of information has a label (name, phone, email) and a value (the actual data). That’s the core idea behind JSON. It formalises this natural way of organising information so computers can understand it too.

Think about it: if someone handed you a business card, you’d instantly know which bit is the name, which is the phone number, and which is the email. But how would a computer know?

The Problem: Computers Need Structure

Imagine you copied your contact list into a plain text message. Something like this:

You could probably work it out. But a computer? It has no idea where one contact ends and another begins. It can’t tell that “0412 345 678” is a phone number, not a very long postcode. It doesn’t know that “TechCorp” is a company, not someone’s surname.

This is why we need structure.

JSON: Structure That Makes Sense

JSON (JavaScript Object Notation) solves this problem with a few simple rules. Here’s that same contact in JSON:

{
  "name": "Sarah Chen",
  "phone": "0412 345 678",
  "email": "sarah@example.com",
  "company": "TechCorp"
}

The Four Rules of JSON

JSON has just four things to remember. That’s it.

1. Curly braces {} are containers

Think of curly braces like a box. Everything inside the braces belongs together — it’s one “thing”. A contact. A product. A message.

{
  ...everything about this thing goes here...
}

2. Labels come before values

Every piece of data has a label (called a “key”) followed by a colon, then the value:

"name": "Sarah Chen"

The label is always in quotes. The colon says “is”. So you can read this as: name is Sarah Chen.

3. Commas separate items

When you have multiple pieces of data, put commas between them:

{
  "name": "Sarah Chen",
  "phone": "0412 345 678",
  "email": "sarah@example.com"
}

Notice: no comma after the last item. This trips up beginners, but you’ll get used to it.

4. Square brackets [] make lists

When you have multiple things of the same type (like multiple phone numbers, or multiple contacts), use square brackets:

{
  "name": "Sarah Chen",
  "phones": ["0412 345 678", "02 9876 5432"]
}

That’s a list of two phone numbers. Simple.

See the Connection

Here’s the magic of JSON: it translates directly into what you see on screen. Toggle between the raw JSON and how an app might display it:

{
  "name": "Sarah Chen",
  "role": "Product Designer",
  "company": "TechCorp",
  "email": "sarah@example.com",
  "phone": "0412 345 678",
  "skills": ["UX Design", "Figma", "User Research"],
  "available": true
}

Every field in the JSON maps directly to something on the card. The "skills" array becomes those little tags. The "available": true becomes that green status badge. It’s not magic — it’s just structured data being displayed nicely.

Try It Yourself

The best way to understand JSON is to write some. Type in the editor below and watch it come to life as a contact card. The editor will tell you if something’s wrong.

JSON in the Real World

You encounter JSON constantly, even if you’ve never noticed it. Here are a few places it lives:

{
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "workbench.colorTheme": "One Dark Pro",
  "files.autoSave": "afterDelay"
}

{
  "location": "Peregian Beach",
  "temperature": 26,
  "units": "celsius",
  "conditions": "Partly Cloudy",
  "humidity": 65,
  "forecast": [
    {"day": "Tomorrow", "high": 28, "low": 21},
    {"day": "Thursday", "high": 25, "low": 19}
  ]
}

{
  "model": "claude-sonnet-4-20250514",
  "max_tokens": 1024,
  "messages": [
    {
      "role": "user",
      "content": "What is JSON?"
    }
  ]
}

Every example follows the same pattern: labels, values, curly braces, and occasionally square brackets for lists. Once you see it, you can’t unsee it.

Why It’s Worth Learning JSON

Think of JSON as a tidy set of labelled boxes. Instead of a messy pile of notes, you get clear labels with the exact data that goes with each one. That makes it a really practical way to model information — people, products, events, tasks, anything you want to keep organised and reusable.

It’s also a portable format. Once information is in JSON, different apps can read it, share it, or update it without guessing what each piece means. That’s why it shows up everywhere — it’s the simplest common language for data.

And yes, a JSON file can act like a tiny database. Picture a list of records — like a small spreadsheet — saved in one file. An app can read that file, show the data, and even update it. It won’t replace a full database for big systems, but for small projects and personal workflows, it’s a surprisingly powerful way to store and manage information.

Why This Matters for AI

If you’re learning to work with AI tools, understanding JSON gives you real advantages:

1. Configuration files — Many AI tools (like Claude Code, Cursor, and Copilot) use JSON for settings. Understanding the format means you can actually customise your tools instead of just accepting the defaults.

2. API integration — When apps talk to AI services, they speak JSON. Knowing the format helps you understand what’s possible and troubleshoot when things go wrong.

3. Structured prompts — Some advanced AI techniques involve sending structured data. JSON is often the format of choice.

You don’t need to become a JSON expert. But recognising the pattern — curly braces, labels, values — will make AI tools feel much less mysterious.

Test Your Understanding

Let’s check that the key concepts have clicked.

The Takeaway

JSON isn’t programming. It’s just a way of writing information so that computers can understand it. Remember three things:

1. Curly braces {} — A container that groups related data together
2. "label": value — Every piece of data has a name
3. Square brackets [] — For lists of things

Next time you see a .json file, you’ll know exactly what you’re looking at. And the next time an AI tool asks you to edit a configuration file, you won’t be intimidated — you’ll know it’s just labels and values, wrapped in curly braces.