Skip to main content Link Search Menu Expand Document Toggle dark mode Copy Code (external link)
paperwork.help

#each : Iteration Helper

Iterate over arrays or collections, rendering the enclosed template for each item. The data context changes to the current item within the block.

On this page

Syntax

{{#each collection}}
  <!-- Content repeated for each item -->
{{/each}}

Parameters

Parameter Type Required Description
collection Array/IEnumerable, Dictionary or object Yes The collection to iterate over, or a dictionary or JSON object to iterate the entries of

Special Variables

Variable Description
@index Zero-based index of current item (0, 1, 2, …)
@first Boolean, true for the first item
@last Boolean, true for the last item
@key The key of the current entry (dictionary or object), or the index (collection)
this Reference to the current item
../ Access parent context

Examples

Basic Iteration

<ul>
{{#each model.items}}
  <li>{{this}}</li>
{{/each}}
</ul>

Data:

builder.WithData("model", new {
    items = new[] { "Apple", "Banana", "Orange" }
});

Output:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

With Object Properties

<table>
  {{#each model.products}}
  <tr>
    <td>{{add(@index, 1)}}</td>
    <td>{{this.name}}</td>
    <td>${{format(this.price, '0.00')}}</td>
  </tr>
  {{/each}}
</table>

Data:

builder.WithData("model", new {
    products = new[] {
        new { name = "Widget", price = 19.99m },
        new { name = "Gadget", price = 29.99m }
    }
});

Using Special Variables

{{#each model.items}}
  <div class="{{if(@first, 'first', '')}} {{if(@last, 'last', '')}}">
    <span>Item {{add(@index, 1)}}</span>
    <h3>{{this.title}}</h3>
  </div>
{{/each}}

Iterating a Dictionary or Object

From 9.8, {{#each}} over a dictionary, or a JSON object (Newtonsoft JObject or System.Text.Json), runs once for each entry. this is the value, and @key is the key or property name.

{{#each model.prices}}
  <p>{{@key}}: {{this}}</p>
{{/each}}

Before 9.8 a dictionary or JSON object was bound once, with the whole object as this. To bind an object once now, use {{#with}}.

Accessing Parent Context

<h1>{{model.companyName}}</h1>
{{#each model.departments}}
  <h2>{{this.name}}</h2>
  {{#each this.employees}}
    <li>{{this.name}} works at {{model.companyName}} in {{../name}}</li>
  {{/each}}
{{/each}}

Underlying Implementation

The {{#each}} helper compiles to the following Scryber template element:

<template data-bind="{{collection}}">
  <!-- Your content here with {{this}} context -->
</template>

This uses Scryber’s ForEach component internally, which provides the iteration and context management.

Notes

  • Empty arrays render nothing (no error)
  • Works with any IEnumerable collection
  • Can be nested for multi-dimensional data
  • Context changes to current item within the block
  • Use {{.}} to reference the entire current item
  • Provides @index, @first, @last and @key special variables
  • Iterates the entries of a dictionary or JSON object (9.8 onwards)

See Also