JSON for Beginners: Understanding API Data

Every API guide tells you "the API returns JSON," but what exactly is JSON? If you're new to programming, JSON can look like a confusing wall of brackets and quotes. Let's break it down in plain English.

What is JSON?

JSON stands for JavaScript Object Notation. It's a text format for storing and transmitting structured data. Despite the name, JSON isn't just for JavaScript — every programming language can read and write it.

JSON has become the universal language of APIs. When you ask an API for data, it almost always responds with JSON.

JSON syntax in 5 minutes

JSON has only two structures: objects (curly braces) and arrays (square brackets).

Objects — key-value pairs

An object is a collection of named values, like a dictionary:

Rules: Keys are always strings in double quotes. Values can be strings, numbers, booleans (true/false), null, arrays, or other objects.

Arrays — ordered lists

An array is an ordered list of values:

Arrays use square brackets and can contain any type of value — including other objects and arrays.

Data types

JSON supports six data types:

• String: "hello" — text in double quotes
• Number: 42 or 3.14 — no quotes
• Boolean: true or false — no quotes
• Null: null — represents "no value"
• Object: { "key": "value" }
• Array: [1, 2, 3]

Reading JSON from an API

When you call an API, you get a JSON string back. In JavaScript, you convert it to a usable object with .json():

Navigating nested JSON

Real API responses are often deeply nested. Here's a simplified weather API response:

To access the wind speed: data.current.wind.speed

To get Tuesday's high: data.forecast[1].high

Use dot notation for object properties and bracket notation with an index for array elements.

Common JSON mistakes

• Single quotes — JSON requires double quotes. {'name': 'Pikachu'} is invalid.
• Trailing commas — {"a": 1, "b": 2,} is invalid. Remove the last comma.
• Comments — JSON doesn't support comments. No // or /* */.
• Undefined — JSON has null but not undefined.

Useful tools

• JSON formatter — Paste raw JSON into a formatter (many free ones online) to see it with proper indentation.
• console.log() — In your browser's DevTools, console.log(data) shows JSON as an interactive, expandable tree.
• JSON.stringify() — Convert a JavaScript object to a JSON string: JSON.stringify(obj, null, 2) gives pretty-printed output.
• jq — A command-line JSON processor. curl api.example.com | jq . pretty-prints the response.

Practice reading JSON

The best way to get comfortable with JSON is to read real API responses. Try these in your browser console:

Expand the objects in the console, click through the nested structures, and trace the paths to specific values. Within an hour, reading JSON will feel natural.