JSON Tutorial for Beginners

Lesson 1: What is JSON and Why Do We Use It?

Whenever two computers communicate over the internet (such as a mobile app talking to a backend server), they need a common language to structure information. In the early web, XML was standard, but its verbose tags made it heavy and complex.

JSON (JavaScript Object Notation) solved this by providing a lightweight format that maps directly to common data structures like dictionaries and lists in almost every programming language.

Lesson 2: Writing Your First JSON File

A JSON file is simply a plain text file saved with the .json extension. Below is an example of a complete, valid JSON document representing a book:

{
  "title": "Learning JSON",
  "publishedYear": 2026,
  "isAvailable": true,
  "author": {
    "name": "Alex River",
    "email": "alex@example.com"
  },
  "chapters": [
    "Introduction to Data Formats",
    "Objects and Arrays",
    "Working with Web APIs"
  ]
}

Try pasting this into our JSON Formatter to see how formatting and indentation work.

Lesson 3: Working with JSON in JavaScript & TypeScript

JavaScript provides native support for JSON through the global JSON object. You do not need to install any third-party libraries.

• JSON.parse(text) — converts a JSON string into a JavaScript object.
• JSON.stringify(object, replacer, space) — serializes a JavaScript object into a JSON formatted string.

// 1. Parsing a JSON string into a JavaScript Object
const jsonString = '{"name": "Varun", "role": "Developer"}';
const userObj = JSON.parse(jsonString);
console.log(userObj.name); // "Varun"

// 2. Converting a JavaScript Object into formatted JSON string
const updatedJson = JSON.stringify(userObj, null, 2);
console.log(updatedJson);

Working with TypeScript? Generate typed interfaces automatically with our JSON to TypeScript Generator.

Lesson 4: Working with JSON in Python

In Python, the built-in json standard library module makes encoding and decoding JSON straightforward:

import json

# Parsing JSON string to Python dictionary
json_data = '{"language": "Python", "version": 3.12}'
py_dict = json.loads(json_data)
print(py_dict["language"])  # Python

# Converting Python dictionary to formatted JSON string
json_output = json.dumps(py_dict, indent=2)
print(json_output)

Lesson 5: Sending & Receiving JSON in Web APIs

When building web applications, you will often fetch JSON from a REST API or send JSON payloads via HTTP POST / PUT requests:

// Fetching data from a REST API endpoint
async function loadUserData() {
  const response = await fetch("https://api.example.com/users/1", {
    headers: {
      "Accept": "application/json"
    }
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const userData = await response.json();
  console.log("User:", userData);
}

Next Steps

• Learn all data types and rules in our JSON Guide.
• Review typical pitfalls in the Common JSON Errors Guide.
• Practice formatting with the JSON Formatter and JSON Validator.