On This Page
Functions
Examples
Array helpers provide utilities for working with arrays in templates.
Functions
count
Gets the length of an array or array-like object.
Template Syntax
{count itemsArray}Parameters
| Name | Type | Description |
|---|---|---|
| array | array | The array to count |
Returns
number - The length of the array, or 0 if null/undefined.
Example
<p>You have {count notifications} notifications</p>first
Gets the first element of an array.
Template Syntax
{first itemsArray}Parameters
| Name | Type | Description |
|---|---|---|
| array | array | The array to get the first element from |
Returns
any - The first element of the array, or undefined if empty.
Example
<p>Primary category: <b>{first categories}</b></p>last
Gets the last element of an array.
Template Syntax
{last itemsArray}Parameters
| Name | Type | Description |
|---|---|---|
| array | array | The array to get the last element from |
Returns
any - The last element of the array, or undefined if empty.
Example
<p>Most recent item: <b>{last recentItems}</b></p>join
Joins array elements with a delimiter.
Template Syntax
{join itemsArray ', ' true}Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| array | array | [] | The array to join |
| delimiter | string | ’ ’ | The delimiter to use |
| spaceAfter | boolean | false | Whether to add a space after the joined string |
Returns
string - The joined string.
Example
<p>Categories: {join categories ', ' false}</p>joinComma
Joins array elements with commas.
Template Syntax
{joinComma itemsArray true false}Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| array | array | [] | The array to join |
| oxford | boolean | false | Whether to use Oxford comma |
| quotes | boolean | false | Whether to wrap items in quotes |
Returns
string - The comma-joined string.
Example
<p>This product comes in {joinComma colors true true}.</p>range
Returns an array with a range of numbers.
Template Syntax
{#each number in range 1 6} {number}{/each}Parameters
| Name | Type | Default | Description |
|---|---|---|---|
| start | number | The start of the range | |
| stop | number | The end of the range | |
| step | number | 1 | The step between numbers |
Returns
array - An array containing the range of numbers.
Example
<select name="birthyear"> {#each range 1900 2024} <option value="{this}">{this}</option> {/each}</select>