Python Data Types and Structures for the Web

You styled a beautiful responsive site with Grid and Flexbox — now meet the data that tells that site what to show. Think of HTML/CSS as the wardrobe; Python data types are the wardrobe inventory, the shopping list, and the frantic text message that says "We ran out of black shirts."

---

Why data types matter for web dev

You've already learned syntax and control flow: conditionals, loops, functions — the how of making decisions. Data types are the what — the shape of the stuff your code manipulates. In web apps, types control:

• How request parameters get parsed
• How templates render lists of items (e.g., products, posts)
• How JSON payloads are formed and consumed
• How state (e.g., dark mode preference) is stored and checked

If CSS is how things look and control flow is how things behave, data types are why they behave that way.

---

Quick tour: Python built-in types you will use most

Numbers (int, float)

• Use for counts, indexes, sizes, coordinates.
• Example: pagination (page number), image width/height.

page = 2                  # int
price = 19.99             # float

Strings (str)

• Everything texty: usernames, slugs, HTML fragments, class names.
• Strings are immutable (you get a new string when you transform it).

username = "cs50student"
class_attr = "btn primary"

Booleans (bool)

• True/False flags. Perfect for feature toggles like dark mode.

dark_mode_enabled = True

NoneType (None)

• The explicit "nothing" value. Good for default parameters or missing form values.

value = None
if value is None:
    # handle missing value
    pass

Lists (list)

• Ordered, mutable sequences. Great for rows of query results, lists of classes, form fields.

posts = ["Intro to Python", "Flask Tips", "Web APIs"]
posts.append("Async in JS")

Tuples (tuple)

• Ordered, immutable sequences. Use as fixed collections (e.g., coordinates, constant config).

point = (37.77, -122.42)  # lat, lon

Sets (set)

• Unordered collections of unique items. Great for deduping, membership tests.

tags = {"python", "web", "css"}
if "python" in tags:
    pass

Dictionaries (dict)

• Key-value mapping. The Python equivalent of JSON objects and JavaScript objects — pervasive in web apps.

user = {"id": 42, "name": "Ada"}
# convert to JSON for API response
import json
json_payload = json.dumps(user)

---

Mutability, identity, and why you should care

• Mutable: lists, dicts, sets — you can change them in place (append, update, remove).
• Immutable: strings, tuples, numbers — operations produce new objects.

Why it matters:

• If you pass a list into a function and it mutates it, the caller sees the change. Surprise bugs happen here.
• Immutable things are safe defaults for constants (e.g., tuple for fixed paths).

"Mutable data structures are like public whiteboards — convenient, but someone will inevitably erase your diagram."

---

Real web examples (because theory without coffee is sad)

1) Handling form data (dicts and strings)

When a user submits a form, frameworks often hand you a dict-like object. Extract strings, coerce to types:

# pseudo-code: request.form behaves like a dict
name = request.form.get('name')          # str or None
age = int(request.form.get('age', 0))    # coerce to int
is_subscribed = request.form.get('subscribe') == 'on'  # bool

2) Rendering a list in a template (lists)

Pass a Python list to your template engine to render multiple elements.

products = [
    {'name': 'T-shirt', 'price': 20},
    {'name': 'Sticker', 'price': 3}
]
# In Jinja template: {% for p in products %} {{ p.name }} {% endfor %}

3) JSON APIs (dicts ↔ JSON)

Dicts map directly to JSON objects. This is how your backend talks to frontends.

from flask import jsonify
@app.route('/api/user')
def api_user():
    user = {'id': 1, 'name': 'Ada'}
    return jsonify(user)

4) Managing CSS classes (sets/lists/strings)

You might compute a dynamic class list server-side based on state (e.g., dark mode from earlier CSS topic).

classes = ['btn']
if is_primary:
    classes.append('btn--primary')   # BEM-style class from your CSS architecture
if dark_mode_enabled:
    classes.append('is-dark')
class_attr = ' '.join(classes)

---

Handy idioms every web dev should memorize

• List comprehensions for concise transformations:

emails = [u['email'] for u in users if u.get('active')]

• dict.get(key, default) to avoid KeyError when handling user input
• enumerate(list) when you need indexes
• unpacking tuples for readability:

lat, lon = point

• Use sets for fast membership checks (O(1) average):

blocked = set(['spam@example.com', 'bot@evil.com'])
if email in blocked:
    reject()

---

Pitfalls and gotchas

• Don't use mutable defaults in function signatures (def f(x, items=[]): ...) — they persist between calls.
• Be explicit converting types from user input. "42" (str) is not 42 (int).
• Remember JSON (JS objects) have string keys — convert carefully.

---

Quick comparison cheat-sheet

Structure	Mutable?	Typical web use
list	Yes	Ordered collections, query results
tuple	No	Fixed coordinates, constants
dict	Yes	JSON payloads, objects, form data
set	Yes	Deduping, fast membership checks
str	No	Text, classes, templates

---

Takeaways (what to remember when coding web stuff)

• Use the right shape for the job: lists for ordered sequences, dicts for objects, sets to dedupe.
• Watch mutability: don't accidentally mutate shared structures.
• Convert and validate early: parse ints, booleans, dates before you trust values from forms or APIs.
• Dicts are the glue between Python and JSON/JS — mastering them makes building APIs painless.

"Shape your data thoughtfully. Your templates, APIs, and future self will thank you — or curse you if you don't."

---

If you want, I can now:

• Show an end-to-end example: form → Python parsing → DB insert → JSON response
• Create exercises that reinforce list/dict manipulation with web-style problems

Which would you like next?