Web Development·6 min read

JSON for Beginners: What It Is and How to Read It

JSON is everywhere — APIs, config files, databases. If you've never worked with it before, here's a plain-English guide to what JSON is, how to read it, and how to use it.

You've Probably Already Seen JSON

If you've ever looked at a URL that ends in `.json`, peeked at a browser's network tab, opened a config file, or exported data from an app — you've seen JSON. You might not have known what it was, but it was there.

JSON (JavaScript Object Notation) is the most common format for moving data around the internet. When an app on your phone loads your profile, it's probably receiving JSON. When a website fetches product listings, that's JSON. When you export your data from almost any service, it comes as JSON.

Understanding JSON isn't just for developers. If you work with data, APIs, automation tools like Zapier, or even just want to understand what's happening behind the scenes on the web, knowing how to read JSON saves time and confusion.

What JSON Looks Like

Here's a simple example:

```json

{

"name": "Jesse Winters",

"email": "jesse@example.com",

"age": 30,

"isPremium": true,

"skills": ["design", "development", "SEO"],

"address": {

"city": "Austin",

"state": "TX"

}

}

```

That's it. That's JSON. It's just a way of organizing information into a format that both humans and computers can read.

The Building Blocks

JSON has only a few types of values. Once you know these, you can read any JSON file:

Strings — text in double quotes

`"name": "Jesse Winters"`

Always double quotes, never single quotes. That's a rule, not a preference.

Numbers — no quotes needed

`"age": 30`

Can be integers (30) or decimals (29.99). No quotes around them.

Booleans — true or false

`"isPremium": true`

Lowercase, no quotes. Only two options: `true` or `false`.

Null — intentionally empty

`"middleName": null`

Means "this field exists but has no value." Different from the field not being there at all.

Arrays — ordered lists in square brackets

`"skills": ["design", "development", "SEO"]`

A list of values separated by commas. Can contain strings, numbers, objects, or even other arrays.

Objects — key-value pairs in curly braces

`"address": { "city": "Austin", "state": "TX" }`

A collection of named values. This is actually what the entire JSON example above is — one big object.

Rules That Trip People Up

JSON is strict. Unlike JavaScript (which it's named after), JSON doesn't forgive sloppy formatting:

No trailing commas. This is invalid:

```json

{

"name": "Jesse",

"age": 30,

}

```

That comma after `30` will break everything. Remove it.

Double quotes only. Single quotes, backticks, and no quotes are all invalid:

```json

{ 'name': 'Jesse' }

{ name: "Jesse" }

```

Both are wrong. Keys and string values must use double quotes.

No comments. You can't add `// this is a comment` or `/* block comment */` in JSON. If you've ever wondered why a JSON file looks like it has no documentation, this is why.

No functions. JSON is pure data. You can't include executable code.

How to Read Nested JSON

Real-world JSON is often deeply nested. An API response might look like this:

```json

{

"user": {

"id": 12345,

"profile": {

"displayName": "Jesse",

"avatar": "https://example.com/photo.jpg",

"settings": {

"theme": "dark",

"notifications": {

"email": true,

"push": false

}

}

},

"posts": [

{

"id": 1,

"title": "First post",

"tags": ["intro", "hello"]

},

{

"id": 2,

"title": "Second post",

"tags": ["update"]

}

]

}

}

```

Reading this: start from the outside and work in. The root is an object with one key (`user`). That user has an `id`, a `profile` object, and a `posts` array. The profile has nested `settings` with nested `notifications`. Each post in the array is its own object with `id`, `title`, and `tags`.

When this gets unwieldy — and it will — paste it into a JSON formatter to pretty-print it with proper indentation. Raw JSON from APIs often arrives as one long line with no whitespace, making it impossible to read without formatting.

Where You'll Encounter JSON

API responses. Every modern API returns data in JSON. If you're building anything that talks to a third-party service (Stripe, Twilio, OpenAI, Google Maps), you're working with JSON.

Configuration files. `package.json` (Node.js), `tsconfig.json` (TypeScript), `.eslintrc.json`, VS Code's `settings.json` — all JSON.

Data exports. Export your data from Twitter, Google, Facebook, or most SaaS tools? You'll get a ZIP full of JSON files.

Databases. MongoDB stores documents in a JSON-like format. PostgreSQL has a native JSON column type. Many apps store flexible data as JSON blobs.

No-code tools. Zapier, Make, Retool, and other automation platforms pass data between steps as JSON objects. Understanding the structure helps you map fields correctly.

Common Tasks

Validating JSON. Did I format this correctly? Is there a missing comma or bracket? Paste it into a validator to find out — it'll point to the exact line and character where the error is.

Pretty-printing JSON. The API gave me a 10,000-character single line. I need to actually read it. A formatter adds indentation and line breaks.

Minifying JSON. I have a nicely formatted config file but need to send it over a network. Minifying strips whitespace to make it as small as possible.

Converting JSON. I have JSON but need it in CSV for a spreadsheet, or I have a CSV and need it in JSON for an API.

All of these are things you can do with FluidConvert's JSON Formatter & Validator — format, validate, and minify right in your browser.

That's JSON

It's not a programming language. It's not complicated. It's just a way of writing structured data using curly braces, square brackets, colons, and commas. Once you see the pattern — keys on the left, values on the right, everything in quotes — you can read any JSON file in the world.

And when the file is too ugly to read, format it.