How to Read and Write JSON: A Visual Guide for Absolute Beginners

Have you ever seen something like the text below and felt completely lost?

{
  "company": "TechSolutions Inc.",
  "employees": 50,
  "isHiring": true
}

If so, don’t worry! You’re looking at JSON (JavaScript Object Notation), and it’s much simpler than it looks. In this visual guide, we’ll break it down into bite-sized, easy-to-understand pieces. No prior programming knowledge needed!

What is JSON, Really? (The Lunchbox Analogy)

Think of JSON as a digital lunchbox that holds information in a very organized way.

• The lunchbox itself is the { } curly braces.
• Inside, you have different containers for each type of food (a sandwich, an apple, a juice box).
• Each container has a label so you know what’s inside.

JSON does the same thing for data. It’s a standard way to package information so that computers (and humans!) can easily understand it.

---

Part 1: How to READ JSON

Let’s learn the language by looking at a simple example. Imagine we’re describing a person.

{
  "firstName": "Maria",
  "age": 30,
  "isProgrammer": true
}

Now, let’s break this down visually. The core concept is the “Key-Value Pair.”

The Key-Value Pair: The Heart of JSON

Every piece of information in JSON is stored as a Key-Value Pair. It’s just a fancy way of saying “Label : Data”.

text

"firstName": "Maria"

• The KEY is the label. It tells you what the information is. It is always in double quotes.
• The COLON : separates the key from the value.
• The VALUE is the actual data itself.

Understanding Different Data Types

Values can be different types of data. Here are the most common ones:

Key	Value	Value Type	What it Means
"firstName"	"Maria"	String	A piece of text. Always in double quotes.
"age"	30	Number	A number. No quotes needed.
"isProgrammer"	true	Boolean	Can only be true or false. No quotes.

Rule #1: Commas Separate Items

Look at our example again. Notice the commas (,) after "Maria" and 30. Commas are used to separate the key-value pairs inside the object.

{
  "firstName": "Maria",  // <-- Comma here
  "age": 30,             // <-- Comma here
  "isProgrammer": true   // <-- No comma on the last item!
}

⚠️ Common Mistake: Don’t put a comma after the last item! This is the most common error beginners make.

---

Part 2: Level Up! Arrays and Nested Objects

JSON gets powerful when you start combining things. Let’s look at a more complex example.

What is an Array? (A List)

An Array is simply a list of items stored in a specific order. We use square brackets [ ] to create a list, and we separate the items with commas.

In this example, "hobbies" is a key whose value is an array of strings.

{
  "firstName": "Maria",
  "age": 30,
  "hobbies": ["reading", "hiking", "photography"]
}

What is a Nested Object? (An Object inside an Object)

Sometimes, you need to group related information together. You can put an entire JSON object inside another one!

In this example, the key "address" doesn’t have a simple value like a string or number. Its value is another object with its own set of key-value pairs.

{
  "firstName": "Maria",
  "age": 30,
  "address": {
    "street": "123 Main St",
    "city": "Austin",
    "zipCode": "73301"
  }
}

This creates a clear, hierarchical structure. The address is a group of information belonging to Maria.

---

Part 3: How to WRITE Your Own JSON

Let’s create a JSON file from scratch! We’ll describe a book.

Step 1: Start with the Curly Braces
This defines your “container” or “lunchbox.”

{
}

Step 2: Add Your First Key-Value Pair
Let’s add the book’s title. Remember the format: "key": value. Don’t forget the comma!

{
  "title": "The JSON Guide",
}

Step 3: Add More Information
Add the author and the year published. The year is a number, so no quotes!

{
  "title": "The JSON Guide",
  "author": "Alex Chen",
  "year": 2024,
}

Step 4: Add an Array
Let’s list the genres this book belongs to. We use square brackets [ ] for the list.

{
  "title": "The JSON Guide",
  "author": "Alex Chen",
  "year": 2024,
  "genres": ["Programming", "Technology", "Education"],
}

Step 5: Add a Nested Object
Finally, let’s add some details about the publisher as a nested object.

{
  "title": "The JSON Guide",
  "author": "Alex Chen",
  "year": 2024,
  "genres": ["Programming", "Technology", "Education"],
  "publisher": {
    "name": "CodeWorld Publishing",
    "country": "USA"
  }
}

And we’re done! You’ve just built a valid JSON object.

Your Quick-Check Guide: JSON Rules Summary

Before you go, keep this cheat sheet handy:

Rule	Do ✅	Don’t ❌
Containers	Use { } for objects, [ ] for arrays.	Mix them up.
Quotes	Put KEYS always in double quotes.	name: "John"
		✅ "name": "John"
Commas	Separate items in objects/arrays with commas.	"a": 1 "b": 2
		✅ "a": 1, "b": 2
Last Item	No comma after the last item in an object or array.	"item": true,

Your Next Step: Practice!

The best way to learn is to try it yourself. Go to a website like JSONFormatter.org, paste the book example we just created, and click “Format” or “Validate.” Try breaking it—remove a comma or a quote—and see what error message you get. This is how the pros learn!

JSON is the universal language of data for a reason: it’s logical, organized, and once you know the basic rules, surprisingly simple. You’ve now got the foundation to understand how a huge part of the digital world shares information. Great job