# Understanding JSON

> The simple format that powers your apps, settings, and AI tools

Source: https://www.peregianhub.com.au/articles/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:

Contact list as plain text

Sarah Chen 0412 345 678 sarah@example.com works at TechCorp David Kim 0423 456 789 david.kim@email.com Sydney office Emma Wilson emma@startup.io 0434 567 890 CEO

**Can you spot the problems?**

- ? Is "TechCorp" a name, company, or location?

- ? The order keeps changing — email before phone, then phone before email

- ? Where does one contact end and the next begin?

- ? Is "Sydney office" a note, an address, or something else?

A human might figure this out. A computer sees chaos.

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:

Messy Plain Text

Sarah Chen 0412 345 678 sarah@example.com works at TechCorp

Structured JSON

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

**Now it's clear:**

- ✓ `"name"` labels the person's name

- ✓ `"phone"` labels the phone number

- ✓ `"company"` tells us TechCorp is a company

- ✓ Curly braces `{}` wrap everything about this contact

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

SC

Sarah Chen

Product Designer at TechCorp

Available

sarah@example.com

0412 345 678

UX Design Figma User Research

`{}` Wraps the whole contact

`"key": value` Labels each piece

`[]` Lists the skills

`true` Boolean (yes/no)

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.

Write JSON Valid JSON

Live Preview

**Try these experiments:**

- Change the name and watch the card update

- Add more skills to the list (remember the commas!)

- Add `"available": true` to show a status badge

- Remove a quote and see what happens

## JSON in the Real World

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

VS Code settings.json

When you change your editor's font size or theme, you're editing JSON:

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

Weather API Response

When your weather app shows the forecast, it received JSON like this:

```
{
 "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}
 ]
}
```

Claude API Request

When you send a message to Claude, your app sends JSON like this:

```
{
 "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.

1. In JSON, what do curly braces `{}` represent?

**Correct!** Curly braces create an "object" — a container that groups related data together. Think of it like a box that holds all the information about one thing.

**Not quite.** Curly braces `{}` create a container (called an "object") for related data. Square brackets `[]` are for lists. Think of `{}` as a box that holds information about one thing.

2. In the JSON `"email": "sarah@example.com"`, what is `"email"` called?

**Correct!** The part before the colon is the "key" — it labels what the data is. The part after the colon is the "value" — the actual data.

**Not quite.** In JSON, the part before the colon (`"email"`) is called the "key" or label. It tells you what the data means. The part after the colon is the "value".

3. Which punctuation would you use to store a list of phone numbers in JSON?

**Correct!** Square brackets `[]` create an array — a list of items. Use them whenever you have multiple things of the same type.

**Not quite.** Square brackets `[]` are used for lists (called "arrays") in JSON. Curly braces are for objects, and parentheses/angle brackets aren't used in JSON at all.

0/3 correct

## 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.

Share this article



[ Articles ](https://www.peregianhub.com.au/articles/)