Liquid markup lets you loop through an array of objects and output information about each object.

For example, you could take a list of upcoming events and output each event's title, date, and URL. This is sometimes referred to as "Liquid looping."

Looping through the contents of an array takes two steps:

1. Building the array with a dictionary subquery export

2. Using Liquid markup to loop through the array

Step 1: Creating the dictionary subquery export

First, we create a subquery export with a dictionary output method.

1. Create a subquery export.

2. Configure the following settings:

   • Name: Enter a name. For example, received-checklist-items. The name must be computer friendly (all lowercase and one word, using hyphens - or underscores _ instead of spaces).

   • Output: Dictionary

   • Row Limit: If you want to return a certain number of objects, enter a number in the row limit setting. Otherwise, leave the row limit setting empty.

3. Create a join to the base of the object you want to return. For example, Checklists.

4. Add the exports you want returned by your loop. For example, the subject and fulfilled date of a checklist item.

5. Rename the exports so they can be called as Liquid markup tags later on. That is: all lowercase, separated by hyphens.

   

6. Add any needed filters and sorts.

   

7. Select Save.

How the dictionary output works

The Dictionary output setting tells Slate to transform this subquery export into an array.

An array is a data structure that stores elements in a list in a specific order.

Slate transforms the subquery export into XML by using the following “P-K-V” data structure:

1. Each object (here, an application) is enclosed in a <row> tag

2. Each export is enclosed in a <p> tag.

3. In each <p> tag:

   • The export's name is enclosed in a <k> tag

   • The export's value is enclosed in a <v> tag

When we run the query that contains the subquery export we created earlier, we see a single application represented like so:

<row> <!-- object -->
	<p> <!-- export -->
		<k>subject</k> <!-- export name -->
		<v>Official High School Transcript<v> <!-- export value -->
	</p>
	<p> <!-- export -->
		<k>fulfilled-date</k> <!-- export name -->
		<v>01DEC2021<v> <!-- export value -->
	</p>
</row>

<row>
	<p>
		<k>subject</k>
		<v>Letter of Recommendation<v>
	</p>
	<p>
		<k>fulfilled-date</k>
		<v>11NOV2021<v>
	</p>
</row>

Based on this output, we see that the application has:

• two fulfilled checklist items (the <row> tags)

• the attributes described by their respective <k> and <v> tags

Step 2: Looping through the array using Liquid markup

Now that you have a dictionary subquery export returning the data you want to use, Liquid markup can loop through the data and output this information.

The basic form this loop takes is: “for each object in this array of objects, do something.”

Continuing our example above, we’ll call each object checklist and use the received-checklist-items export as our array.

Initiate the loop

This Liquid markup tag tells Slate which object to loop over.

In the source editor of whatever you’re editing:

1. Enter the opening bracket and percent sign to create a Liquid markup tag:
   {%
   
   

2. Enter “for” to begin the loop:
   {% for
   
   

3. In the for loop, define what you want each object to be called (we will call them checklists):
   {% for checklist
   
   

4. Identify the array by entering “in” and the name of the array (the subquery export “received-checklist-items”):
   {% for checklist in received-checklist-items
   
   

5. Close the Liquid markup tag:
   {% for checklist in received-checklist-items %}

Result:

{% for checklist in received-checklist-items %}

Define the loop action

With the loop initiated, we now tell Slate what should be done with the objects it retrieves.

Here, we’re going to tell Slate to present these objects in a line of text: <SUBJECT>: Received on <DATE>, where <SUBJECT> and <DATE> are the checklist item’s subject and fulfilled date.

To call the checklist’s subject, we use the format {{object.export}}, where:

• object is the name we established in the for loop initiation (“checklist”)

• export is the name of the subquery export (“subject”)

We’ll follow the same format for the fulfilled date.

In the source editor:

1. Hit return to start a new line.

2. Enter {{checklist.subject}}: Received on {{checklist.fulfilled-date}}.

Result:

{% for checklist in received-checklist-items %} 
   {{checklist.subject}}: Received on {{checklist.fulfilled-date}}

Terminate the loop

On a new line, end the loop by using the endfor tag.

Result:

{% for checklist in received-checklist-items %} 
   {{checklist.subject}}: Received on {{checklist.fulfilled-date}} 
{% endfor %}

Verify the output

Based on our example data, we would receive the following output:

Official High School Transcript: Received on 01DEC2021
Letter of Recommendation: Received on 11NOV2021

✨ Tip

Use forlooper helpers to grab additional attributes about your loop, such as the current index number. See Helper Variables in Fundamental Liquid Markup and Conditional Logic for more information.

Output Options

You have many options on how you want to show each object in the array.

Here are some different examples using our example above:

Each Object On a New Line

{% for checklist in received-checklist-items %}
  <p>{{checklist.subject}}: Received on {{checklist.fulfilled-date}}</p>
{% endfor %}

Each Object In an Ordered/Numbered List

<ol>
  {% for checklist in received-checklist-items %}     
        <li>{{checklist.subject}}: Received on {{checklist.fulfilled-date}}</li>
  {% endfor %}
</ol>
  

Each Object In an Unordered List

<ul>
  {% for checklist in received-checklist-items %}
    <li>{{checklist.subject}}: Received on {{checklist.fulfilled-date}}</li>
  {% endfor %}
</ul>

Each Object On a Table Row

<table>
<thead>
  <tr>
    <th>Checklist Item</th>
    <th>Received Date</th>
    </tr>
</thead>
<tbody>
{% for checklist in received-checklist-items %}
  <tr>
    <td>{{checklist.subject}}</td>
    <td>{{checklist.fulfilled-date}}</td>
  </tr>
{% endfor %}
</tbody>
</table>