Skip to content

Lists and Loops

When your contacts have lists of data -- orders, tags, recommendations, subscription features -- NLT gives you several ways to display them. Use for loops for full control over each item's layout, or quick lists and tables for instant formatting.


For Loops

For loops let you iterate over a list and render custom content for each item:

Example: Basic for loop

Template:

{for item in the user's Orders}
- {item.Name}: {item.Price}
{end for}

Output:

  • Widget Pro: 29.99
  • Gadget X: 49.99
  • Alpha Kit: 19.99

The structure is:

{for item in the user's Orders}
Content for each item
{end for}

You can name the loop variable anything you like -- item, product, order, etc. Whatever name you choose, use it with dot notation to access properties.


Item Property Access

Access any property on the current item using dot notation:

Example: Accessing item properties

Template:

{for product in the user's Recommendations}
{product.Name} - {product.Price} - {product.Rating} stars
{end for}

Output:

Widget Pro - $29.99 - 4.5 stars Gadget X - $49.99 - 4.8 stars

You can use any HTML inside the loop to create rich layouts:

{for item in the user's Orders}
<div class="order-card">
<h3>{item.Name}</h3>
<p>Price: {item.Price}</p>
</div>
{end for}

Loop Variables

Inside a for loop, the special loop variable gives you information about the current iteration:

VariableDescriptionExample Value
{loop.index}Current position (starts at 1)1, 2, 3...
{loop.index0}Current position (starts at 0)0, 1, 2...
{loop.first}True on the first itemTrue / False
{loop.last}True on the last itemTrue / False
{loop.length}Total number of items5

Example: Using loop variables

Template:

{for item in the user's Orders}
{loop.index}. {item.Name}
{if loop.last}(Last item){end if}
{end for}

Output:

  1. Widget Pro
  2. Gadget X
  3. Alpha Kit (Last item)
Tip

Loop variables are great for adding numbering, showing separators between items, or giving special treatment to the first or last item in a list.


Limiting Items

Use show first N to display only the first N items from a list:

Example: Limiting to first 3 items

Template:

{for item in the user's Products, show first 3}
{item.Name}
{end for}

Output:

Widget Pro Gadget X Alpha Kit

{for item in the user's Products, show first 3}
{item.Name}
{end for}

Empty List Fallback

Show alternative content when the list is empty or doesn't exist, using {else}:

Example: Empty list fallback

Template:

{for item in the user's Orders}
<div>{item.Name}</div>
{else}
<p>You haven't placed any orders yet.</p>
{end for}

Output:

You haven't placed any orders yet.

Tip

Always add an {else} branch for user-facing lists. It's a much better experience than showing nothing when the list happens to be empty.


Nested Loops

For loops can be nested. Each loop has its own scope:

{for category in the user's Categories}
<h2>{category.Name}</h2>
{for product in category.Products}
<p>{product.Name}</p>
{end for}
{end for}

Quick Lists

For simple display without custom HTML per item, use the {list} shorthand:

Example: Default list (unordered)

Template:

{list the user's Tags}

Output:

<ul><li>vip</li><li>active</li><li>premium</li></ul>

Example: Comma-separated list

Template:

{list the user's Tags, as comma list}

Output:

vip, active, premium

Example: Ordered (numbered) list

Template:

{list the user's Tags, as ordered list}

Output:

<ol><li>vip</li><li>active</li><li>premium</li></ol>

List Styles

SyntaxStyleOutput
{list ...} or as unordered listBullet list<ul><li>...</li></ul>
as ordered listNumbered list<ol><li>...</li></ol>
as comma listComma-separateditem1, item2, item3

You can also limit quick lists:

{list the user's Tags, show first 5}
{list the user's Tags, as comma list, show first 3}
Note

If the source resolves to null or an empty array, the list block produces no output at all.


Tables

Render structured data as a clean HTML table -- perfect for order summaries, line items, or any tabular data:

Example: Table with specific columns

Template:

{table the user's Order History with columns: Date, Item, Amount}

Output:

[Renders a styled HTML table with Date, Item, and Amount columns]

With Specific Columns

{table the user's Order History with columns: Date, Item, Amount}

Only the columns you specify are shown, in the order you list them.

Auto-Discover Columns

{table the user's Order History}

Without specifying columns, the table automatically uses all keys from the first row as column headers.

Tip

Tables are rendered with inline CSS styles for maximum email client compatibility -- warm cream header background, clean borders, and proper padding. They look great in every email client.