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

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"}
}
- String: Text in double quotes —
"hello". Must use double quotes, not single. - Number: Integer or decimal —
42,3.14,-7,1.5e10 - Boolean:
trueorfalse(lowercase, no quotes) - Null:
null(lowercase, no quotes) — represents absence of value - Array: Ordered list in square brackets —
[1, "two", true, null] - Object: Key-value pairs in curly braces —
{"name": "Ram", "age": 25}
The 4 Structural Rules
- Keys must be strings in double quotes:
"name"notname - Key-value pairs separated by colon:
"name": "Ram" - Multiple pairs/elements separated by commas:
"a": 1, "b": 2 - 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
| Factor | JSON | XML |
|---|---|---|
| Verbosity | Compact | Verbose |
| Readability | High | Medium |
| Parsing speed | Fast | Slower |
| Schema validation | JSON Schema | XSD |
| Comments | Not supported | Supported |
| Data types | 6 native types | All strings |
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
- Paste raw or minified JSON
- Click Format to pretty-print with indentation
- Validation errors show the exact line and character of the issue
- Copy the formatted output with one click
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)
