Liquid Markup Looping
  • 15 Nov 2023
  • 3 minute read
  • Dark
    Light
  • PDF

Liquid Markup Looping

  • Dark
    Light
  • PDF

Article Summary

Liquid markup allows users to loop through an array of objects (e.g., a list of upcoming events) and output information about each object (e.g., an event's title, date, and URL). This is sometimes referred to as "liquid looping." Looping through an array has two broad steps:

  1. Construct the dictionary subquery export to build the array.

  2. Use Liquid markup to loop through the array.

Constructing the Dictionary Subquery Export for the Array

  1. Add a subquery export.

  2. Join to the object you want to return (e.g., checklists).

  3. Add the exports you want to return in your liquid loop. These exports will represent the properties of the object you are returning (e.g., the name and fulfilled date of a checklist item). You will want these exports' name settings to be all lowercase and one word (you can use hyphens or underscores for spaces)

  4. Add any needed filters and sorts.

  5. If you want only to return a certain number of objects, enter a number in the row limit setting; otherwise, leave the row limit setting empty/null.

  6. Set the output setting to "Dictionary."

  7. Set the name setting to what you want to call the array (e.g., "received-checklist-items"). You will want the name setting to be all lowercase and one word (you can use hyphens or underscores for spaces).

  8. Save your subquery export.

Data Structure - What the Dictionary Setting Does

By selecting the "Dictionary" output setting, we are prompting Slate to transform this subquery export into an array. Slate does that by using the following data structure:

  1. Each object is put in a row tag,

  2. Each export for the object, each property for the object, is put in a p tag,

  3. In each p tag:

    • The export's name is put in a k tag,

    • The export's value is put in a v tag,

Using our example above for returning received checklist items for an application, we would see something like the following when we ran/previewed the query for a given application:

<row>
<p><k>subject</k><v>Official High School Transcript<v></p><p><k>fulfilled-date</k><v>01DEC2021<v></p>
</row>
<row>
<p><k>subject</k><v>Letter of Recommendation<v></p><p><k>fulfilled-date</k><v>11NOV2021<v></p>
</row>

The application has two fulfilled checklist items with the specified attributes in this example.

Looping through the Array Using Liquid Markup

Now that you have a dictionary subquery export grabbing the data you want to use, we can use Liquid markup to loop through and output the information. We recommend writing this Liquid markup in the source of what you're editing.

1. Use the for tag to begin the loop. For the for loop, you will specify (a) what you want each object to be called and (b) the array to use—continuing our example above.

We decided to call each object "checklist" and to use the "received-checklist-items" export.

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

 

 

2. Within the for loop, tell Slate what property/export you want to return for the current object—continuing our example above.

You will see that we are suffixing each object, "checklist," with a period and the export name from our subquery export. We also put a line break at the end of our sentence, so each object is on its own line.

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

 

 

3. End the loop by using the forloop tab. Continuing our example above:

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

{% endfor %}

 

 

4. Verify your output. Continuing our example above, we would see:

 

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

Tip

You can use forlooper helpers to grab additional attributes about your loop, such as the current index number. Learn more about them by clicking here and looking in the "Helper Variables" section.

Different 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 %}
  {{checklist.subject}}: Received on {{checklist.fulfilled-date}}

{% endfor %}

Each Object In an Ordered/Numbered List


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

Each Object In an Unordered List


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

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> 


Was this article helpful?