JSON and HTTP: The Language APIs Speak
The data format (JSON) and vocabulary (HTTP methods and status codes) almost every web API uses to exchange information.
What you'll learn
- Read and write valid JSON, including nested objects and arrays
- Explain what GET, POST, PUT, and DELETE requests are typically used for
- Interpret common HTTP status codes and which category they belong to
Prerequisites
Explanation
You already know that browsers and servers talk using HTTP requests and responses. APIs use the same request/response cycle, but instead of a full HTML page, the response body is usually JSON (JavaScript Object Notation) — a lightweight, text-based format for representing structured data.
JSON's building blocks are the same as JavaScript's: objects ({ }), arrays ([ ]), strings, numbers, booleans, and null. The catch is that JSON is stricter than a JavaScript object literal:
- Every key must be a double-quoted string —
{"title": "Sapiens"}, never{title: "Sapiens"}or single quotes. - There are no trailing commas, no comments, and no functions — JSON is pure data, nothing executable.
Because both browsers and servers have built-in JSON support, converting between JSON text and real objects is one line: JSON.stringify(value) turns a JavaScript value into JSON text, and JSON.parse(text) turns JSON text back into a usable value.
HTTP methods tell a server what kind of action a request wants, independent of the URL it targets:
- GET — read/fetch data, without changing anything on the server.
- POST — create something new (like submitting a new order).
- PUT — replace/update an existing resource with a full new version.
- DELETE — remove a resource.
(You may also encounter PATCH, for partially updating a resource, but GET/POST/PUT/DELETE cover the vast majority of everyday API work.)
HTTP status codes tell you how the request went, and they're grouped into ranges you can reason about even before checking the exact number:
- 2xx — success (
200 OK,201 Created,204 No Content). - 3xx — redirection (the resource moved elsewhere).
- 4xx — client error (your request was the problem —
400 Bad Request,401 Unauthorized,404 Not Found). - 5xx — server error (the server failed while handling an otherwise valid request —
500 Internal Server Error).
Put together, calling an API is exactly the request/response cycle you already know, specialized: you choose a method to describe your intent, send it to a path, and get back a status code plus a JSON body describing what happened. Every example in this lesson runs entirely inside a small mock function — no real network call leaves your browser — so you can focus on the shape of the data and the vocabulary, safely and offline.
Example
A mock API response object, plus JSON.stringify/JSON.parse round-tripping its body — no real network request is made.
// A tiny mock API response - entirely local, no network involved.
const bookApiResponse = {
status: 200,
method: "GET",
path: "/books/3",
body: {
id: 3,
title: "Norwegian Wood",
price: 14.99,
inStock: true,
},
};
const asJsonText = JSON.stringify(bookApiResponse.body);
const parsedBack = JSON.parse(asJsonText);
console.log(asJsonText);
console.log(parsedBack.title, parsedBack.price);Try it yourself
Change the method, path, or body fields, then press Run to see the JSON text change.
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Guided exercise
Guided exercise
Complete the mockFetch function so that calling mockFetch('/books/7', 'GET') returns { status: 200, body: { id: 7, title: 'Sapiens' } }, and any other path/method combination returns { status: 404, body: null }.
Checks: Returns status 200 for GET /books/7 · Returns a body with title 'Sapiens' · plus 1 hidden check
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Stuck? Get a hint.
Independent exercise
Independent exercise
Write a function mockFetch(path, method) from scratch: GET '/books' returns { status: 200, body: <an array> }; POST '/books' returns { status: 201, body: { created: true } }; anything else returns { status: 404, body: null }.
Checks: GET /books returns 200 with an array body · POST /books returns 201 with { created: true } · plus 1 hidden check
Code editor. Press Escape then Tab to leave the editor if keyboard focus becomes trapped. Press Control+Shift+M inside the editor to toggle Tab-key focus trapping.
Stuck? Get a hint.
Common mistakes
- Using single quotes or trailing commas in real JSON text — valid JSON requires double-quoted keys and strings, and no trailing commas, even though JavaScript object literals are more forgiving.
- Assuming every API response is JSON — always check the documentation or the Content-Type header.
- Treating PUT and POST as interchangeable — POST typically creates a new resource, PUT typically replaces an existing one at a known location.
- Assuming a 4xx status means the server is broken — 4xx means the client's request was the problem; 5xx means the server failed.
Knowledge check
Takeaway
APIs run on the same request/response cycle as the web, specialized: an HTTP method expresses intent, a status code reports the outcome, and JSON carries the data.
Summary
JSON is a strict, text-based data format built from objects, arrays, and primitive values, easily converted to and from real values with JSON.stringify/JSON.parse. HTTP methods (GET, POST, PUT, DELETE) express what a request wants to do, and status codes (2xx, 3xx, 4xx, 5xx) report what happened.
References
Your notes
Notes save automatically.
Finished this lesson?
Mark it complete to track your progress and schedule a future review.
AI tutor
The optional AI tutor isn't enabled in this deployment. All lessons, exercises, quizzes, and search work fully without it.