JSON Basics

Modern web applications constantly exchange data between the browser and servers.

JSON (JavaScript Object Notation) is the most common format used for this data exchange.

What Is JSON?

JSON is a lightweight data format used to store and transfer structured data.

• Easy for humans to read
• Easy for machines to parse
• Language-independent

Although it looks like JavaScript objects, JSON is just a text format.

Why JSON Is So Important

JSON is used everywhere:

• APIs and web services
• Frontend–backend communication
• Configuration files
• Data storage and transfer

If you work with APIs, you will work with JSON.

JSON Structure

JSON data is written as key–value pairs.

{
  "name": "Alex",
  "role": "Developer",
  "active": true
}
  

Keys must always be strings, and values can be different data types.

Valid JSON Data Types

• String
• Number
• Boolean
• Object
• Array
• null

Functions and variables are not allowed in JSON.

JSON vs JavaScript Objects

They look similar, but there are important differences.

• JSON keys must be in double quotes
• JSON does not support functions
• JSON is pure data, not executable code

Converting JSON to JavaScript

When you receive JSON from a server, you convert it into a JavaScript object.

const jsonData = '{"name":"Alex","role":"Developer"}';

const user = JSON.parse(jsonData);
console.log(user.name);
  

JSON.parse() converts JSON text into an object.

Converting JavaScript to JSON

When sending data to a server, you convert JavaScript objects into JSON.

const user = {
  name: "Alex",
  role: "Developer"
};

const jsonString = JSON.stringify(user);
  

JSON.stringify() converts objects into JSON text.

Real-World Example

A server response usually looks like this:

{
  "id": 101,
  "username": "alex_dev",
  "email": "alex@example.com"
}
  

Your JavaScript code reads this data and displays it in the UI.

Common Beginner Mistakes

• Using single quotes instead of double quotes
• Trying to store functions in JSON
• Forgetting to parse JSON responses

Always validate JSON format.

Thumb Rules

• JSON is data, not code
• Always use double quotes
• Use JSON.parse() and JSON.stringify()
• JSON is the backbone of APIs

What Comes Next?

Now that you understand how data is structured using JSON, the next step is learning how data is sent and received over the web.

In the next lesson, we will explore HTTP Methods.