·6 min read

JSON Tutorial: The Complete Guide for Beginners (2026)

JSON is everywhere in modern web development — APIs, config files, databases. This complete guide teaches you JSON syntax, rules, common mistakes, and practical use cases with examples.

Ram profile

Ram

JSON tutorial for beginners showing JSON syntax and structure
Share

If you've worked with any web API, read a config file, or inspected a network request in your browser's devtools, you've seen JSON. It's the data format that powers the modern web — simple enough to read as a human, structured enough for computers to parse reliably.

Whenever you're working with JSON in your browser, use our free JSON Formatter to validate and pretty-print any JSON instantly.

What Is JSON?

JSON (JavaScript Object Notation) is a lightweight data interchange format. It stores and transmits structured data as human-readable text. Despite being named after JavaScript, JSON is language-independent — every major programming language can parse and generate it.

JSON was created by Douglas Crockford in the early 2000s as an alternative to XML. It won because it's simpler, more compact, and maps naturally to data structures in most languages (objects, arrays, strings, numbers).

JSON Syntax: The 6 Rules

JSON has exactly six data types and four structural rules:

The 6 Data Types

{
  "string": "Hello, World",
  "number": 42,
  "float": 3.14,
  "boolean": true,
  "nullValue": null,
  "array": [1, 2, 3],
  "object": {"key": "value"}
}
  1. String: Text in double quotes — "hello". Must use double quotes, not single.
  2. Number: Integer or decimal — 42, 3.14, -7, 1.5e10
  3. Boolean: true or false (lowercase, no quotes)
  4. Null: null (lowercase, no quotes) — represents absence of value
  5. Array: Ordered list in square brackets — [1, "two", true, null]
  6. Object: Key-value pairs in curly braces — {"name": "Ram", "age": 25}

The 4 Structural Rules

  1. Keys must be strings in double quotes: "name" not name
  2. Key-value pairs separated by colon: "name": "Ram"
  3. Multiple pairs/elements separated by commas: "a": 1, "b": 2
  4. No trailing comma after the last item

Common JSON Mistakes (and How to Fix Them)

Mistake 1: Single Quotes Instead of Double Quotes

// WRONG - will break
{'name': 'Ram'}

// CORRECT {"name": "Ram"}

Mistake 2: Trailing Comma

// WRONG - trailing comma after "age" is invalid JSON
{
  "name": "Ram",
  "age": 25,
}

// CORRECT { "name": "Ram", "age": 25 }

This is the most common mistake developers make when hand-writing JSON because JavaScript allows trailing commas, but JSON does not.

Mistake 3: Unquoted Keys

// WRONG
{name: "Ram"}

// CORRECT {"name": "Ram"}

Mistake 4: Comments

// WRONG - JSON doesn't support comments
{
  // This is the user's name
  "name": "Ram"
}

// CORRECT - no comments in JSON {"name": "Ram"}

If you need comments in config files, use JSON5 or JSONC formats — but these are not standard JSON and won't parse with JSON.parse().

Paste any JSON you're unsure about into our JSON Formatter — it validates instantly and highlights the exact error line.

JSON Structure: Objects and Arrays

Objects

A JSON object is a collection of key-value pairs, like a dictionary or hash map:

{
  "user": {
    "id": 123,
    "name": "Ram Charan",
    "email": "ram@example.com",
    "isAdmin": false,
    "tags": ["developer", "blogger"]
  }
}

You access nested values using dot notation in most languages: user.name, user.tags[0].

Arrays

A JSON array is an ordered list that can contain any mix of data types:

[
  {"id": 1, "name": "Ram"},
  {"id": 2, "name": "Krishna"},
  42,
  "hello",
  null,
  [1, 2, 3]
]

Arrays can mix types freely — objects, strings, numbers, other arrays.

JSON in JavaScript

Parsing JSON (string → object)

const jsonString = '{"name": "Ram", "age": 25}';
const user = JSON.parse(jsonString);
console.log(user.name); // "Ram"

Stringifying (object → JSON string)

const user = { name: "Ram", age: 25 };
const jsonString = JSON.stringify(user);
// '{"name":"Ram","age":25}'

// With formatting: const pretty = JSON.stringify(user, null, 2); // { // "name": "Ram", // "age": 25 // }

Fetching JSON from an API

async function getUser(id) {
  const response = await fetch(https://api.example.com/users/${id});
  const user = await response.json(); // automatically parses JSON
  return user;
}

JSON in Python

import json

Parse JSON string to Python dict

json_string = '{"name": "Ram", "age": 25}' user = json.loads(json_string) print(user["name"]) # Ram

Convert Python dict to JSON string

user = {"name": "Ram", "age": 25} json_string = json.dumps(user, indent=2) print(json_string)

JSON vs XML: Why JSON Won

FactorJSONXML
VerbosityCompactVerbose
ReadabilityHighMedium
Parsing speedFastSlower
Schema validationJSON SchemaXSD
CommentsNot supportedSupported
Data types6 native typesAll strings
The tipping point was AJAX — when browsers started making background API calls in the 2000s, JSON's compactness (less data to transfer) and direct mapping to JavaScript objects made it the obvious choice over XML.

Real-World JSON Examples

REST API Response

{
  "status": "success",
  "data": {
    "users": [
      {"id": 1, "name": "Ram", "email": "ram@example.com"},
      {"id": 2, "name": "Priya", "email": "priya@example.com"}
    ],
    "total": 2,
    "page": 1
  }
}

package.json (Node.js)

{
  "name": "my-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build"
  },
  "dependencies": {
    "next": "^16.0.0",
    "react": "^19.0.0"
  }
}

GitHub Actions Workflow (YAML, but JSON-compatible)

Most CI/CD configs use YAML (a superset of JSON). Understanding JSON makes YAML trivial.

Validating and Formatting JSON

In practice, you'll frequently receive JSON that is:

  • Compressed into a single line (API responses)
  • Malformed with syntax errors (copy-paste from docs)
  • Deeply nested and hard to read
Our JSON Formatter handles all three scenarios:
  1. Paste raw or minified JSON
  2. Click Format to pretty-print with indentation
  3. Validation errors show the exact line and character of the issue
  4. Copy the formatted output with one click
No account, no upload, no data leaves your browser.

What's Next?

Once you're comfortable with JSON, the natural next steps are:

  • JSON Schema — defining and validating JSON structure
  • REST APIs — most return JSON; understanding it unlocks the entire API ecosystem
  • GraphQL — queries return JSON; responses use JSON structure
  • MongoDB — stores documents in BSON (Binary JSON)
JSON is foundational knowledge. Every modern developer works with it daily — and now you know exactly how it works.

Share

Related Articles

Stay Updated

Get the latest articles delivered straight to your inbox. No spam, ever.