Control structures (if, for) in Flask - Step-by-Step Execution

Concept Flow - Control structures (if, for)

Start

↓

Evaluate if condition

↓

Execute if block

↓

Start for loop

↓

Check loop condition

↓

Execute loop body

↓

Update loop variable

↩Back to Check loop condition

First, the if condition is checked; if true, its block runs. Then a for loop starts, repeating its block while the condition is true.

Execution Sample

Flask

items = ['apple', 'banana', 'cherry']
if len(items) > 2:
    for item in items:
        print(item)

Checks if the list has more than 2 items, then prints each item one by one.

Execution Table

Step	Action	Condition/Value	Result/Output
1	Check if len(items) > 2	len(items) = 3	True, enter if block
2	Start for loop	items = ['apple', 'banana', 'cherry']	Loop begins
3	Iteration 1	item = 'apple'	Print 'apple'
4	Iteration 2	item = 'banana'	Print 'banana'
5	Iteration 3	item = 'cherry'	Print 'cherry'
6	Check next iteration	No more items	Exit loop

💡 Loop ends after all items are printed; if condition was true so loop ran.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
items	['apple', 'banana', 'cherry']	Same	Same	Same	Same	Same
item	None	None	'apple'	'banana'	'cherry'	'cherry'

Key Moments - 2 Insights

Why does the for loop run only if the if condition is true?

Because the for loop is inside the if block, it only executes when the if condition is true, as shown in step 1 and 2 of the execution_table.

What happens if the list has 2 or fewer items?

The if condition becomes false, so the for loop is skipped entirely, no printing happens. This is implied by the 'No' branch in the concept_flow.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'item' at Step 4?

A 'apple'

B 'cherry'

C 'banana'

D None

💡 Hint

Check the 'Condition/Value' column at Step 4 in execution_table.

At which step does the loop end?

A Step 5

B Step 6

C Step 3

D Step 2

💡 Hint

Look for the step where 'No more items' is the condition in execution_table.

If the list had only 2 items, what would happen to the execution_table?

A Steps 3 to 6 would not run

B Only Step 6 would run

C All steps would run as normal

D Step 1 would be skipped

💡 Hint

Refer to the if condition check in Step 1 and its effect on the loop starting in Step 2.

Concept Snapshot

Control structures guide program flow.
Use if to choose actions based on conditions.
Use for to repeat actions over items.
If condition false skips the block.
For loops run once per item.
Blocks inside if run only if condition true.

Full Transcript

This example shows how control structures work in Flask code. First, the if statement checks if the list has more than two items. If true, it enters the if block and starts a for loop. The for loop goes through each item in the list and prints it. The execution table tracks each step: checking the if condition, starting the loop, each iteration printing an item, and finally exiting the loop when no items remain. Variables like 'item' change each iteration. Beginners often wonder why the loop only runs if the if condition is true; this is because the loop is inside the if block. If the list had fewer items, the loop would not run at all. This visual trace helps understand how these control structures work together to control program flow.

Practice

1. What does the {% if %} statement do in a Flask template?

easy

A. It repeats HTML for each item in a list.

B. It imports another template file.

C. It defines a function in the template.

D. It shows HTML only when a condition is true.

Solution

1. Step 1: Understand the purpose of {% if %}

   The {% if %} statement checks a condition and controls whether some HTML is shown.

2. Step 2: Compare with other options

   {% for %} repeats HTML, functions and imports are not done with {% if %}.

3. Final Answer:

   It shows HTML only when a condition is true. -> Option D

4. Quick Check:

   {% if %} controls conditional display [OK]

Hint: Remember: if = condition, for = repeat [OK]

Common Mistakes:

• Confusing if with for loop
• Thinking if defines functions
• Assuming if imports templates

2. Which of the following is the correct syntax to start a for loop in a Flask template?

easy

A. {% for item in list %}

B. {% loop item in list %}

C. {% foreach item in list %}

D. {% iterate item over list %}

Solution

1. Step 1: Recall Flask template for loop syntax

   The correct syntax uses {% for variable in iterable %}.

2. Step 2: Check options for exact match

   Only {% for item in list %} matches the correct syntax exactly.

3. Final Answer:

   {% for item in list %} -> Option A

4. Quick Check:

   Flask uses {% for variable in iterable %} [OK]

Hint: For loops use 'for variable in list' syntax [OK]

Common Mistakes:

• Using 'loop' or 'foreach' instead of 'for'
• Using 'over' instead of 'in'
• Missing curly braces or percent signs

3. Given this Flask template snippet:

{% for color in ['red', 'green', 'blue'] %}
  
{{ color }}
{% endfor %}

What will be the rendered HTML output?

medium

A. red green blue

B. colorcolorcolor

C. redgreenblue

D. SyntaxError

Solution

1. Step 1: Understand the for loop iteration

   The loop runs over the list ['red', 'green', 'blue'], assigning each to 'color'.

2. Step 2: Render each item inside <p> tags

   Each iteration outputs <p> followed by the color name and </p>.

3. Final Answer:

   <p>red</p><p>green</p><p>blue</p> -> Option C

4. Quick Check:

   Loop prints each color in <p> tags [OK]

Hint: For loops output each item wrapped in HTML [OK]

Common Mistakes:

• Printing the variable name instead of its value
• Missing endfor tag causing syntax error
• Expecting plain text without tags

4. Identify the error in this Flask template code:

{% for user in users %}
  
{{ user.name }}
{% endfor %}

Assuming users is an empty list, what happens?

medium

A. SyntaxError because endfor is missing.

B. No output is shown because the loop does not run.

C. Runtime error because user.name is undefined.

D. Outputs one empty <p></p> tag.

Solution

1. Step 1: Check loop behavior with empty list

   When users is empty, the for loop body does not execute at all.

2. Step 2: Confirm no output or errors occur

   No iterations means no <p> tags output, and no errors happen.

3. Final Answer:

   No output is shown because the loop does not run. -> Option B

4. Quick Check:

   Empty list means zero loop runs, zero output [OK]

Hint: Empty lists skip for loops silently [OK]

Common Mistakes:

• Expecting an error when list is empty
• Thinking endfor is missing
• Assuming output of empty tags

5. You want to display a message "No items found" if a list items is empty, otherwise list each item inside <li> tags within a <ul></ul>. Which Flask template code correctly does this?

hard

A. {% if items %}

{% for item in items %}
{{ item }}
{% endfor %}

{% else %}
No items found
{% endif %}

B. {% for item in items %}
{{ item }}
{% else %}
No items found
{% endfor %}

C. {% if items.length > 0 %}

{% for item in items %}
{{ item }}
{% endfor %}

{% endif %}
No items found

D. {% if items is empty %}
No items found
{% else %}

{% for item in items %}
{{ item }}
{% endfor %}

{% endif %}

Solution

1. Step 1: Use if to check if list has items

   {% if items %}
   {% for item in items %}
   • {{ item }}
   {% endfor %}
   {% else %}

   No items found

   {% endif %} uses {% if items %} which is true if list is not empty.

2. Step 2: Use else to show message when empty

   {% if items %}
   {% for item in items %}
   • {{ item }}
   {% endfor %}
   {% else %}

   No items found

   {% endif %} correctly uses {% else %} to show "No items found" if empty.

3. Final Answer:

   Uses `{% if items %}` with `<ul>` and `{% else %}` for empty case -> Option A

4. Quick Check:

   Use if-else with for loop for empty list check [OK]

Hint: Use if-else around for loop to handle empty lists [OK]

Common Mistakes:

• Using else inside for loop incorrectly
• Checking length with .length (not valid in Jinja)
• Using 'is empty' which is not valid syntax