Skip to content

JSON

Learn JSON — the data format that APIs use to exchange information between clients and servers.

What you'll learn

  • What JSON is and why it replaced XML
  • JSON's six data types and its syntax rules
  • How to parse and stringify JSON in JavaScript
  • Common pitfalls like trailing commas and single quotes

Concept

JSON

JSON (JavaScript Object Notation) is a lightweight, text-based format for exchanging data. It is the lingua franca of web APIs — when a server sends data to a browser, it almost always sends JSON. Despite the name, JSON is language-independent; nearly every language can read and write it.

Syntax and Types

JSON is built from six data types:

{
  "name": "Ada",           // string (must use double quotes)
  "age": 36,               // number
  "isAdmin": true,         // boolean
  "spouse": null,          // null
  "hobbies": ["math", "code"],  // array
  "address": {             // object
    "city": "London",
    "zip": "NW1"
  }
}

Strict Rules

JSON is stricter than JavaScript object literals:

  • Keys must be in double quotes. Single quotes are invalid.
  • Strings must use double quotes. No single quotes.
  • No trailing commas. {"a": 1,} is a syntax error.
  • No comments. // and /* */ are not allowed.
  • No functions or undefined. Only data, never code.

These rules make JSON unambiguous to parse. They also trip up beginners who copy JavaScript syntax into a JSON file.

Parsing in JavaScript

const text = '{"name": "Ada", "age": 36}';
const obj = JSON.parse(text);     // string → object
console.log(obj.name);            // "Ada"

const json = JSON.stringify(obj); // object → string

JSON.parse throws on invalid syntax, so wrap it in try/catch when handling untrusted input.

Why JSON Won

JSON replaced XML for APIs because it is smaller (no closing tags), faster to parse, and maps directly to the objects and arrays programmers already use. It is not better at everything — XML still shines for documents with mixed content — but for data exchange, JSON is the default.

Example

              // A typical API response in JSON
const apiResponse = `{
  "users": [
    { "id": 1, "name": "Ada", "role": "admin" },
    { "id": 2, "name": "Grace", "role": "editor" }
  ],
  "total": 2,
  "page": 1
}`;

// Parse and use it
const data = JSON.parse(apiResponse);
const adminNames = data.users
  .filter(u => u.role === "admin")
  .map(u => u.name);

console.log(adminNames);  // ["Ada"]

// Convert back to JSON (with pretty-printing)
const pretty = JSON.stringify(data, null, 2);
console.log(pretty);

JSON.parse turns the string into a JavaScript object you can manipulate with normal array methods. JSON.stringify with a indent argument produces readable, pretty-printed JSON.

Try it

Common mistakes

The mistake

Using single quotes or trailing commas in JSON.

The fix

JSON requires double quotes for keys and strings, and forbids trailing commas. Use a JSON validator to catch these — the error messages point to the exact position.

The mistake

Calling JSON.parse without try/catch on untrusted input.

The fix

JSON.parse throws on invalid syntax. Wrap it in try/catch and handle the error gracefully, or your whole app will crash on malformed input.

Related Resources

Related Cheatsheets

Related Guides

Practice JSON

2 exercises

Practice JSON

Look up unfamiliar terms

A beginner-friendly glossary explains jargon in plain English — variables, functions, DOM, Promise, and more.

View glossary

Build real projects

Apply what you learned by building guided projects with starter code and solutions.

View projects

Decode error messages

Plain-English explanations of common errors — what they mean, why they happen, and how to fix them.

View errors