JSON
JavaScript Object Notation - a lightweight format for storing and exchanging data between applications.
What is JSON?
JSON (JavaScript Object Notation) is a text format for storing and exchanging data. Almost every web API uses JSON to send data back and forth. If you build anything on the web, you will use JSON constantly.
It looks like JavaScript objects but is actually just text that any programming language can read and write.
What JSON Looks Like
{
"name": "Alice",
"age": 28,
"email": "alice@email.com",
"isActive": true,
"hobbies": ["reading", "coding", "gaming"]
}
Clean, readable, and easy to understand. Keys are strings (in quotes), values can be strings, numbers, booleans, arrays, or nested objects.
Why JSON is Everywhere
Simple: Easy for humans to read and write
Universal: Every programming language can parse JSON
Lightweight: Less verbose than XML
Web Native: Works perfectly with JavaScript
API Standard: REST APIs almost always return JSON
JSON vs JavaScript Objects
They look similar but are different:
JavaScript Object:
const user = {
name: "Alice", // No quotes on keys
greet() { console.log("Hi") } // Can have functions
}
JSON:
{
"name": "Alice" // Keys must be quoted, no functions allowed
}
JSON is stricter. Only data, no functions or methods.
Using JSON in JavaScript
Parse (text to object):
const jsonText = '{"name": "Alice", "age": 28}'
const user = JSON.parse(jsonText)
console.log(user.name) // "Alice"
Stringify (object to text):
const user = { name: "Alice", age: 28 }
const jsonText = JSON.stringify(user)
console.log(jsonText) // '{"name":"Alice","age":28}'
Data Types in JSON
String: "hello"
Number: 42 or 3.14
Boolean: true or false
Array: [1, 2, 3]
Object: {"key": "value"}
Null: null
That is it. Only these six types. Simple and clean.
Nested JSON
JSON can have objects inside objects:
{
"user": {
"name": "Alice",
"address": {
"city": "New York",
"zip": "10001"
}
},
"posts": [
{"title": "First Post", "likes": 10},
{"title": "Second Post", "likes": 25}
]
}
Access nested data:
const data = JSON.parse(jsonText)
console.log(data.user.address.city) // "New York"
console.log(data.posts[0].title) // "First Post"
Real-World Usage
APIs: Backend sends JSON, frontend receives it
const response = await fetch("/api/users")
const users = await response.json()
Config Files: Store settings in JSON
{
"apiUrl": "https://api.example.com",
"timeout": 5000,
"features": ["auth", "payments"]
}
Storage: Save data in browser
localStorage.setItem("user", JSON.stringify(user))
const user = JSON.parse(localStorage.getItem("user"))
Common Mistakes
Trailing Commas: Not allowed in JSON
// WRONG
{"name": "Alice", "age": 28,}
// CORRECT
{"name": "Alice", "age": 28}
Single Quotes: Must use double quotes
// WRONG
{'name': 'Alice'}
// CORRECT
{"name": "Alice"}
Functions: Cannot store functions
// WRONG
{"greet": function() { }}
// CORRECT - only data
{"greeting": "Hello"}
Pretty Printing
Make JSON readable with formatting:
// Compact (one line)
JSON.stringify(data)
// Pretty (indented)
JSON.stringify(data, null, 2)
Output:
{
"name": "Alice",
"age": 28
}
Much easier to read!
JSON in Other Languages
Python:
import json
data = json.loads(json_text) # Parse
text = json.dumps(data) # Stringify
Java:
// Using Gson library
Gson gson = new Gson();
User user = gson.fromJson(jsonText, User.class);
PHP:
$data = json_decode($jsonText);
$text = json_encode($data);
Every language has JSON libraries.
The Bottom Line
JSON is the universal language of web APIs. Master JSON parsing and creation, and you can work with any web service. It is simple, widely supported, and essential for modern development.