Flask route as API endpoint - Step-by-Step Execution

Concept Flow - Flask route as API endpoint

Start Flask app

↓

Receive HTTP request

↓

Match URL to route

Yes↓

Call route function

↓

Process data / logic

↓

Return response (JSON)

↓

Send response to client

↓

End

This flow shows how Flask listens for a web request, matches it to a route, runs the function, and sends back a JSON response.

Execution Sample

Flask

from flask import Flask, jsonify
app = Flask(__name__)

@app.route('/api/data')
def get_data():
    return jsonify({'message': 'Hello API'})

This code creates a Flask API endpoint at /api/data that returns a JSON message.

Execution Table

Step	Action	Input/Request	Function Called	Output/Response
1	Start Flask app	N/A	N/A	App running, waiting for requests
2	Receive HTTP GET request	GET /api/data	N/A	Request received
3	Match URL to route	/api/data	get_data()	Route matched
4	Call route function	N/A	get_data()	Function executes
5	Process data	N/A	get_data()	{'message': 'Hello API'}
6	Return JSON response	N/A	get_data()	JSON response sent
7	Send response to client	N/A	N/A	Client receives JSON
8	End	N/A	N/A	Request cycle complete

💡 Request cycle ends after sending JSON response to client

Variable Tracker

Variable	Start	After Request	After Function Call	Final
request.path	N/A	/api/data	/api/data	/api/data
response	N/A	N/A	{'message': 'Hello API'}	{'message': 'Hello API'}

Key Moments - 3 Insights

Why does Flask call the get_data() function only when the URL matches '/api/data'?

Flask uses the @app.route decorator to link URLs to functions. The execution_table row 3 shows the URL matching step before the function is called.

What format does the API endpoint return data in?

The function returns data using jsonify(), which converts Python dictionaries to JSON format. This is shown in execution_table row 6.

What happens if a request is made to a URL not defined in Flask routes?

Flask will not find a matching route and returns a 404 error. This is implied by the route matching step in execution_table row 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the output at step 5?

A {'message': 'Hello API'}

B App running, waiting for requests

C JSON response sent

D Request received

💡 Hint

Check the 'Output/Response' column at step 5 in the execution_table

At which step does Flask match the incoming URL to the route function?

A Step 2

B Step 4

C Step 3

D Step 6

💡 Hint

Look at the 'Action' column for URL matching in the execution_table

If the route function returned a plain string instead of jsonify, how would the output at step 6 change?

A It would still be JSON formatted

B It would be a plain text response

C Flask would throw an error

D The client would receive no response

💡 Hint

Think about what jsonify() does compared to returning a string directly

Concept Snapshot

Flask API endpoint basics:
- Use @app.route('/path') to define URL
- Define a function to handle requests
- Return data with jsonify() for JSON response
- Flask matches URL, calls function, sends JSON back
- Unmatched URLs return 404 error

Full Transcript

This visual trace shows how a Flask app runs an API endpoint. First, the app starts and waits for requests. When a client sends a GET request to /api/data, Flask matches this URL to the get_data function. The function runs and returns a Python dictionary converted to JSON by jsonify. Flask sends this JSON response back to the client. If the URL does not match any route, Flask returns a 404 error. Variables like request.path hold the URL, and response holds the JSON data. This step-by-step flow helps beginners see how Flask routes work as API endpoints.

Practice

1. What does a Flask route do in a web application?

easy

A. It styles the webpage with CSS.

B. It stores data in a database automatically.

C. It compiles Python code into machine code.

D. It defines a URL where the app listens for requests.

Solution

1. Step 1: Understand the role of a route

   A Flask route sets a specific web address that the app listens to for incoming requests.

2. Step 2: Identify what routes do not do

   Routes do not handle styling, database storage automatically, or code compilation.

3. Final Answer:

   It defines a URL where the app listens for requests. -> Option D

4. Quick Check:

   Flask route = URL listener [OK]

Hint: Routes map URLs to functions handling requests [OK]

Common Mistakes:

• Thinking routes handle styling or database storage
• Confusing routes with frontend design
• Assuming routes compile code

2. Which of the following is the correct syntax to create a Flask route for the URL '/api/data'?

easy

A. @app.route('/api/data')\ndef get_data():\n return 'data'

B. @app.route('/api/data')\nfunction get_data() { return 'data'; }

C. app.route('/api/data')\ndef get_data():\n return 'data'

D. @app.route('/api/data')\ndef get_data():\nprint('data')

Solution

1. Step 1: Check Flask route decorator syntax

   The correct syntax uses @app.route('/api/data') above a Python function definition.

2. Step 2: Verify function and return statement

   The function must be defined with def and return a value; print does not send a response.

3. Final Answer:

   @app.route('/api/data')\ndef get_data():\n return 'data' -> Option A

4. Quick Check:

   Python route decorator + def + return = D [OK]

Hint: Use @app.route decorator and def function with return [OK]

Common Mistakes:

• Using JavaScript syntax inside Flask route
• Missing @ before app.route
• Using print instead of return in route function

3. What will be the output when accessing the '/hello' route in this Flask app?

from flask import Flask, jsonify
app = Flask(__name__)

@app.route('/hello')
def hello():
    return jsonify({'message': 'Hello, world!'})

medium

A. {'message': 'Hello, world!'} as JSON response

B. Plain text: Hello, world!

C. HTML page with 'Hello, world!' text

D. Error: jsonify is not defined

Solution

1. Step 1: Understand jsonify usage

   The function returns jsonify({'message': 'Hello, world!'}), which sends a JSON response.

2. Step 2: Identify response type

   The response is JSON formatted, not plain text or HTML, and no error occurs because jsonify is imported.

3. Final Answer:

   {'message': 'Hello, world!'} as JSON response -> Option A

4. Quick Check:

   jsonify returns JSON response [OK]

Hint: jsonify returns JSON, not plain text or HTML [OK]

Common Mistakes:

• Confusing jsonify with print or return string
• Expecting HTML instead of JSON
• Forgetting to import jsonify

4. Identify the error in this Flask route code:

from flask import Flask, jsonify
app = Flask(__name__)

@app.route('/data')
def data():
    return json({'key': 'value'})

medium

A. Missing @ before app.route decorator

B. json is not imported or defined; should use jsonify

C. Function name 'data' is invalid

D. Route URL must start with '/api/'

Solution

1. Step 1: Check function return statement

   The code uses json({'key': 'value'}) but json is not imported or defined.

2. Step 2: Identify correct function for JSON response

   Flask provides jsonify to return JSON responses, which is imported here.

3. Final Answer:

   json is not imported or defined; should use jsonify -> Option B

4. Quick Check:

   Use jsonify, not json, for JSON response [OK]

Hint: Use jsonify, not json, to return JSON in Flask [OK]

Common Mistakes:

• Using json instead of jsonify
• Forgetting to import jsonify
• Assuming function names must follow special rules

5. You want to create a Flask API endpoint '/user/' that returns JSON with the user's id and a greeting message. Which code correctly implements this?

hard

A. @app.route('/user/')\ndef user():\n return jsonify({'id': id, 'message': 'Hello user'})

B. @app.route('/user/<id>')\ndef user(id):\n return {'id': id, 'message': 'Hello user ' + id}

C. @app.route('/user/')\ndef user(id):\n return jsonify({'id': id, 'message': f'Hello user {id}'})

D. @app.route('/user/')\ndef user(id):\n print({'id': id, 'message': f'Hello user {id}'})

Solution

1. Step 1: Check route URL and parameter type

   The route uses '/user/' which correctly captures an integer parameter named id.

2. Step 2: Verify function parameters and return

   The function accepts id and returns a JSON response using jsonify with the correct message format.

3. Step 3: Identify errors in other options

   @app.route('/user/<id>')\ndef user(id):\n return {'id': id, 'message': 'Hello user ' + id} misses int type and returns a dict without jsonify; @app.route('/user/')\ndef user():\n return jsonify({'id': id, 'message': 'Hello user'}) misses id parameter; @app.route('/user/')\ndef user(id):\n print({'id': id, 'message': f'Hello user {id}'}) uses print instead of return.

4. Final Answer:

   @app.route('/user/')\ndef user(id):\n return jsonify({'id': id, 'message': f'Hello user {id}'}) -> Option C

5. Quick Check:

   Route with int param + jsonify return = A [OK]

Hint: Use in route and return jsonify with id [OK]

Common Mistakes:

• Not specifying for integer parameter
• Returning dict without jsonify
• Using print instead of return in route