.dev
Partner Dashboard

for ​

Last updated View as Markdown

Execute the encapsulated block n times the amount of items equals to the length of the iterable array.

Info

Every for loop provides a local variable forloop which contains information about the loop in progress;

liquid
{% for item in array %}
  block_to_output
{% endfor %}
  • item: The item of the current loop iteration.
  • array: Array to loop over.
  • block_to_output: Rendered expression in every loop iteration.

Example:

Data
json
{
  "products": [
    {
      "slug": "product-1",
      "price": 76
    },
    {
      "slug": "YouCan",
      "price": 100
    },
    {
      "slug": "product-2",
      "price": 30
    },
    {
      "slug": "product-3",
      "price": 124
    },
  ]
}

Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.

liquid
{% for product in products %}
  {{- product.slug -}} | {{- product.price -}}
{% endfor %}

Output

html
product-1 | 76
YouCan | 100
product-2 | 30
product-3 | 124

Paramaters ​

Info

It's worth mentioning that these parameters can coexists with each other.

limit ​

Instead of going through the entire array, we can use limit to set maximum iterations count.

liquid
{% for item in array limit: number %}
  block_to_output
{% endfor %}
  • limit: The number of iterations before stopping the loop.

Example:

Data
json
{
  "products": [
    {
      "slug": "product-1",
      "price": 76
    },
    {
      "slug": "YouCan",
      "price": 100
    },
    {
      "slug": "product-2",
      "price": 30
    },
    {
      "slug": "product-3",
      "price": 124
    },
  ]
}

Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.

liquid
{% for product in products limit: 2 %}
  {{- product.slug -}} | {{- product.price -}}
{% endfor %}

Output

html
product-1 | 76
YouCan | 100

offset ​

When specified, the loop won't start from the first available item in the array, instead, will begin at the specified position.

liquid
{% for item in array offset: number %}
  block_to_output
{% endfor %}
  • offset: Index to start the loop from, should be within [0, array.length - 1].

Example:

Data
json
{
  "products": [
    {
      "slug": "product-1",
      "price": 76
    },
    {
      "slug": "YouCan",
      "price": 100
    },
    {
      "slug": "product-2",
      "price": 30
    },
    {
      "slug": "product-3",
      "price": 124
    },
  ]
}

Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.

liquid
{% for product in products offset: 1 %}
  {{- product.slug -}} | {{- product.price -}}
{% endfor %}

Output

html
YouCan | 100
product-2 | 30
product-3 | 124

range ​

Instead of going through an array, you can instead specific two ends of a range to loop over.

liquid
{% for item in (number..number) %}
  block_to_output
{% endfor %}
  • number..number: the first number and the last number indicates the min and max of space we are creating to which we'll be iterating over. These values can either be hard coded or be some var reference, they both result in the same output as you'd expect.

Example:

Data
json
{
  "max_count": 4
}

Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.

liquid
{% for value in (1..max_count) %}
  {{- value -}}
{% endfor %}

Output

html
1
2
3
4

reversed ​

Unlike the tradition loop order, you can instead start from last to first by using reversed

liquid
{% for item in array reversed %}
  block_to_output
{% endfor %}

Example:

Data
json
{
  "products": [
    {
      "slug": "product-1",
      "price": 76
    },
    {
      "slug": "YouCan",
      "price": 100
    },
    {
      "slug": "product-2",
      "price": 30
    },
    {
      "slug": "product-3",
      "price": 124
    },
  ]
}

Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.

liquid
{% for product in products reversed %}
  {{- product.slug -}} | {{- product.price -}}
{% endfor %}

Output

html
product-3 | 124
product-2 | 30
YouCan | 100
product-1 | 76

Default for empty arrays ​

An else block inside a for loop renders when the loop has no items. This happens when the array is empty or nil, when offset skips all items, and when the first number of a range is greater than the last number.

liquid
{% for item in array %}
  block_to_output
{% else %}
  default_block
{% endfor %}
  • item: The item of the current loop iteration.
  • array: Array to loop over.
  • block_to_output: Rendered expression in every loop iteration.
  • default_block: Expression to render when the loop has no items.

Example:

Data
json
{
  "products": []
}

Note: Data is only refereed as a reference for this example and is in no means reflecting real world data.

liquid
{% for product in products %}
  {{- product.slug -}} | {{- product.price -}}
{% else %}
  There are currently no products to display
{% endfor %}

Output

html
There are currently no products to display

With offset and a range:

Data
json
{
  "sizes": ["S", "M", "L"]
}
liquid
{% for size in sizes offset: 3 %}
  {{- size -}}
{% else %}
  No more sizes
{% endfor %}

{% for value in (3..1) %}
  {{- value -}}
{% else %}
  Empty range
{% endfor %}

Output

html
No more sizes
Empty range

forloop object ​

length ​

  • Type: number
  • Description: Total count of the iterations in the loop.

index ​

  • Type: number
  • Description: Index of the current iteration starting from 1.

index0 ​

  • Type: number
  • Description: Index of the current iteration starting from 0 in reverse order.

rindex ​

  • Type: number
  • Description: Index of the current iteration starting from 1 in reverse order.

rindex0 ​

  • Type: number
  • Description: Index of the current iteration starting from 0.

first ​

  • Type: boolean
  • Description: Is true if the current item is the first item in this iteration, otherwise returns false.

last ​

  • Type: boolean
  • Description: Is true if the current item is the last item in this iteration, otherwise returns false.

Example object:

json
{
  "length": 8,
  "index": 1,
  "index0": 0,
  "rindex": 4,
  "rindex0": 3,
  "first": true,
  "last": false,
}

Usage example

liquid
{% for value in (1..4) %}
  <span>{{- value -}}</span>
  {% unless forloop.last %}
    <span>| </span>
  {% endunless %}
{% endfor %}

Output

html
1 | 2 | 3 | 4