531.3 APIs and JSON

Learn how web applications exchange data using APIs and the JSON format

Overview

In this topic, we explore how back-end systems use APIs (Application Programming Interfaces) to communicate with front-end code and external services. Students learn how APIs expose structured data, how requests and responses work, and how JSON (JavaScript Object Notation) is used as a lightweight, readable format for transmitting data. These concepts are foundational for building interactive and connected web applications.

Targets

In this topic, students learn to:

• Define an API and describe how it supports client-server communication

• Understand how HTTP methods (GET, POST, etc.) are used in API calls

• Read and write structured data using the JSON format

• Recognise how APIs are used to fetch, send, and update data in web applications

• Identify real-world examples of API integration

Syllabus references

Programming for the web

Designing web applications

• Observe and describe the back-end process used to manage a web request – web framework – objects – libraries – databases

What is an API?

An API is a structured way for software components to communicate. In web development, APIs are often used to:

• Send and receive data between client and server

• Allow external services (like maps, payment, or weather) to be integrated

• Support single-page apps or mobile apps by providing data endpoints

APIs follow the request-response model:

• The client sends a request to a URL (endpoint)

• The server processes it and sends a response, usually in JSON format

Common HTTP methods in APIs

Method	Purpose
GET	Retrieve data
POST	Create new data
PUT	Update existing data
DELETE	Remove data

What is JSON?

JSON (JavaScript Object Notation) is a text-based format for representing structured data.

Example:

{
  "name": "Alice",
  "age": 25,
  "email": "[email protected]"
}

JSON is:

• Easy to read and write

• Language-independent

• Supported by most back-end frameworks and front-end JavaScript

API example: returning JSON

Here’s a simple Flask example that returns JSON:

from flask import Flask, jsonify

app = Flask(__name__)

@app.route("/api/user")
def get_user():
    return jsonify({"name": "Alice", "age": 25})

When a client visits /api/user, the server responds with structured JSON data.

An API request returns data in JSON format, allowing web apps to display or process it dynamically.

Using APIs on the front end

Front-end JavaScript uses fetch() to access APIs and update the page without reloading.

fetch("/api/user")
  .then(response => response.json())
  .then(data => console.log(data));

This pattern is common in single-page applications and data dashboards.

Summary

APIs allow web applications to exchange data between the front end and the back end. JSON is the most common format for sending structured data. Understanding how APIs work and how to handle JSON is essential for building dynamic, data-driven applications.