Loops

Scripting Custom Views

Loops run sections of code repeatedly with different values each time.

For Loops

For Loops run a section once for every value in a set. They are often used to show content for each of a form's submissions, like making your own table of responses. We'll go over looking up submissions in a future section.

Liquid Input
{% for value in self.multiple_choice_field %}
  {{ value }} {% if value == "Blue" %} (This one's Blue!) {% endif %}
{% endfor %}
HTML Output

Assuming the "Multiple Choice Field" field for the current submission has the values "Red", "Green", and "Blue" selected.

Red
Green
Blue (This one's Blue!)

Stopping Loops Prematurely

From inside a For Loop, you can use the {% break %} tag to stop the loop from running. In the context of the multiple choice field above, we could use it to stop showing new options when the "Green" value is shown.

Liquid Input
{% for value in self.multiple_choice_field %}
  {{ value }}

  {% if value == "Green" %}
    {% break %}
  {% endif %}
{% endfor %}
HTML Output

Assuming the "Multiple Choice Field" field for the current submission has the values "Red", "Green", and "Blue" selected.

Red
Green

Skipping A Loop Value

From inside a For Loop, you can use the {% continue %} tag to skip to the next value immediately without rendering the content after the tag. In the context of the multiple choice field above, we could use it to skip the "Green" value but show the "Red" and "Blue" values.

Liquid Input
{% for value in self.multiple_choice_field %}
  {% if value == "Green" %}
    {% continue %}
  {% endif %}

  {{ value }}
{% endfor %}
HTML Output

Assuming the "Multiple Choice Field" field for the current submission has the values "Red", "Green", and "Blue" selected.

Red
Blue

Advanced Loop Parameters

Limit

Limit the number of times the loop can run.

{% for value in self.multiple_choice_field limit:2 %} {{ value }} {% endfor %}

Outputs: "Red Blue"

Offset

Starts the loop with an offset, skipping the first number of values given.

{% for value in self.multiple_choice_field offset:1 %} {{ value }} {% endfor %}

Outputs: "Blue Green"

Reversed

Reverses the order of the loop values.

{% for value in self.multiple_choice_field reversed %} {{ value }} {% endfor %}

Outputs: "Green Blue Red"