> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 2a4e2c10-480e-4029-a606-c8c76656c096
---

# For Loops

> For loops can be used in HubL to iterate through sequences of objects. 

For loops can be used in HubL to iterate through sequences of objects. They will most commonly be used with rendering [blog content](/cms/start-building/building-blocks/templates/blog) in a listing format, but they can also be used to sort through other sequence variables.

For loops begin with a `{% for %}` statement and end with an `{% endfor %}` statement. Within the `{% for %}` statement a single sequence item is named followed by `in` and then the name of the sequence. The code between the opening and closing `for` statements is printed with each iteration, and generally includes the printed variable of the individual sequence item. Below is the basic syntax of a for loop:

```jinja theme={null}
{% for item in items %}
	{{ item }}
{% endfor %}
```

Below is a basic example that shows how to print a sequence of variable values into a list.

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% set languages = ["HTML", "CSS", "Javascript", "Python", "Ruby", "PHP", "Java"] %}

    <h1>Languages</h1>
    <ul>
    	{% for language in languages %}
    	<li>{{ language }}</li>
    	{% endfor %}
    </ul>
    ```
  </Tab>

  <Tab tabId="1" title="Output">
    ```html theme={null}
    <h1>Languages</h1>
    <ul>
    	<li>HTML</li>
    	<li>CSS</li>
    	<li>Javascript</li>
    	<li>Python</li>
    	<li>Ruby</li>
    	<li>PHP</li>
    	<li>Java</li>
    </ul>
    ```
  </Tab>
</Tabs>

## Loop properties

As a loop iterates, you can use [conditional logic](/cms/reference/hubl/if-statements) to define the loop's behavior. The variable property `loop.index` keeps a count of the current number of the iterations of the loop. There are several other loop variable properties that count the iterations in different ways. These properties are described below:

| Variable         | Description                                                                                  |
| ---------------- | -------------------------------------------------------------------------------------------- |
| `loop.cycle`     | A helper function to cycle between a list of sequences. See the explanation below.           |
| `loop.depth`     | Indicates how deep in deep in a recursive loop the rendering currently is. Starts at level 1 |
| `loop.depth0`    | Indicates how deep in deep in a recursive loop the rendering currently is. Starts at level 0 |
| `loop.first`     | This variable evaluates to true, if it is the first iteration of the loop.                   |
| `loop.index`     | The current iteration of the loop. This variable starts counting at 1.                       |
| `loop.index0`    | The current iteration of the loop. This variable starts counting at 0.                       |
| `loop.last`      | This variable evaluates to true, if it is the last iteration of the loop.                    |
| `loop.length`    | The number of items in the sequence.                                                         |
| `loop.revindex`  | The number of iterations from the end of the loop. Counting down to 1.                       |
| `loop.revindex0` | The number of iterations from the end of the loop. Counting down to 0.                       |

Below are some examples that use different loop variables. The following basic example uses `loop.index` to keep a count that is printed with each iteration.

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% set loopy = ["Content", "Social", "Contacts", "Reports"] %}
    {% for app in loopy %}
    {{ loop.index }}. {{app}} <br>
    {% endfor %}
    ```
  </Tab>

  <Tab tabId="1" title="Output">
    ```html theme={null}
    1. Content <br />
    2. Social <br />
    3. Contacts <br />
    4. Reports <br />
    ```
  </Tab>
</Tabs>

The next example uses conditional logic to check whether the length of the loop is `divisibleby` certain numbers. It then renders the width of the post-item div accordingly. The example uses the standard blog post loop and assumes that there are 6 posts in the loop.

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% for content in contents %}
    {% if loop.length is divisibleby 4 %}
    <div style="width:25%">Post content</div>

    {% elif loop.length is divisibleby 3 %}
    <div style="width:33.33332%">Post content</div>

    {% else %}
    <div style="width:50%">Post content</div>

    {% endif %}
    {% endfor %}
    ```
  </Tab>

  <Tab tabId="1" title="Output">
    ```html theme={null}
    <div style="width:33.33332%">Post content</div>
    <div style="width:33.33332%">Post content</div>
    <div style="width:33.33332%">Post content</div>
    <div style="width:33.33332%">Post content</div>
    <div style="width:33.33332%">Post content</div>
    <div style="width:33.33332%">Post content</div>
    <div style="width:33.33332%">Post content</div>
    ```
  </Tab>
</Tabs>

## Nested loops

Loops can also be nested with loops. The child for loop will run with each iteration of the parent for loop. In the example below, a list of child items is printed in a nested `<ul>` within a `<ul>` of parent items.

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% set parents = ["Parent item 1", "Parent item 2", "Parent item 3"] %}
    {% set children = ["Child item 1", "Child item 2", "Child item 3"] %}
    <ul>
    	{% for parent in parents %}
    		<li>{{parent}}<ul>
    			{% for child in children %}
    			<li>{{child}}</li>
    			{% endfor %}
    		</ul>
    		</li>
    	{% endfor %}
    </ul>
    ```
  </Tab>

  <Tab tabId="1" title="Output">
    ```html theme={null}
    <ul>
    	<li>
    	Parent item 1
    		<ul>
    			<li>Child item 1</li>
    			<li>Child item 2</li>
    			<li>Child item 3</li>
    		</ul>
    	</li>

    	<li>
    	Parent item 2
    		<ul>
    			<li>Child item 1</li>
    			<li>Child item 2</li>
    			<li>Child item 3</li>
    		</ul>
    	</li>

    	<li>
    	Parent item 3
    		<ul>
    			<li>Child item 1</li>
    			<li>Child item 2</li>
    			<li>Child item 3</li>
    		</ul>
    	</li>
    </ul>
    ```
  </Tab>
</Tabs>

## cycle

The cycle tag can be used within a for loop to cycle through a series of string values and print them with each iteration. One of the most practical applications to this technique is applying alternating classes to your blog posts in a listing. This tag can be used on more than two values and will repeat the cycle if there are more loop iterations than cycle values. In the example below, a class of `odd` and `even` are applied to posts in a listing (the example assumes that there are 5 posts in the loop).

Please note that there are **no spaces** between the comma-separated cycle string values.

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% for content in contents %}
    <div class="post-item {% cycle "odd","even" %}">Blog post content</div>
    {% endfor %}
    ```
  </Tab>

  <Tab tabId="1" title="Output">
    ```html theme={null}
    <div class="post-item odd">Blog post content</div>
    <div class="post-item even">Blog post content</div>
    <div class="post-item odd">Blog post content</div>
    <div class="post-item even">Blog post content</div>
    <div class="post-item odd">Blog post content</div>
    ```
  </Tab>
</Tabs>

## Variables within loops

<Warning>
  Any variables defined within loops are limited to the scope of that loop and cannot be called from outside of the loop.
</Warning>

You can call variables that are defined outside of a loop, from within a loop, but not the other way around.

## Key, value pairs in loops

If the dict of information you are looping through has key and value pairs, a simple for loop would only have access to the values. If you wish to have access to both the keys and values within the for loop, the HubL would be formatted as such:

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% set dict_var = {"name": "Cool Product", "price": "$20", "size":"XL"} %}
    {% for key, val in dict_var.items() %}
    {{ key }}: {{ val }}<br>
    {% endfor %}
    ```
  </Tab>

  <Tab tabId="1" title="Output">
    ```html theme={null}
    name: Cool Product <br />
    price: $20 <br />
    size: XL <br />
    ```
  </Tab>
</Tabs>

## Iterate a set number of times

Sometimes you want to iterate a set number of times, this can be useful in generating HTML or CSS. You can do this using the range function.

<Tabs sync={false}>
  <Tab title="HubL">
    ```jinja theme={null}
    {% for x in range(0,5) %}
    {{loop.index}}
    {% endfor %}
    ```
  </Tab>

  <Tab tabId="1" title="Output">
    ```html theme={null}
    1 2 3 4 5
    ```
  </Tab>
</Tabs>

## Using HubL tags in loops

When you add a tag to page HubSpot automatically assigns an `id` to the wrapping HTML. That tag is unique per tag "name". In situations where you need to use a tag in a for loop setting unique names is not practical. Add the `unique_in_loop` parameter to your tag to generate unique ids. This parameter appends the module name with the current loop iteration number, ensuring that it is unique. Unique id's are not only needed for valid HTML but are important for [accessibility](/cms/best-practices/improve-existing-sites/accessibility).

```jinja theme={null}
{% for item in module.icon_field %}
	{% icon
		name="{{ item.name }}",
		style="{{ item.type }}",
		unicode="{{ item.unicode }}",
    unique_in_loop=True
	%}
{% endfor %}
```