List Helpers

Manipulate, loop, or repeat content from lists or objects in templates.

List

The list helper exposes all of the methods available on the Array built-in JavaScript object. You can use it to join, sort, extract, or reverse a list of values.

Here are a few examples of how you can use it.

Concat multiple values

Template

{{list "John" "concat" "Doe" "Briskine"}}

{{list "John" "concat" "Doe" "Briskine"}}

Preview

John,Doe,Briskine

Join a list values with a specific character

Template

{{list (text "john-doe-briskine" "split" "-") "join" "#"}}

{{list (text "john-doe-briskine" "split" "-") "join" "#"}}

Preview

john#doe#briskine

Sort a list of values

Template

{{list (text "3,2,1" "split" ",") "toSorted"}}

{{list (text "3,2,1" "split" ",") "toSorted"}}

Preview

1,2,3

Reverse a list of values

Template

{{list (text "a,b,c" "split" ",") "toReversed"}}

{{list (text "a,b,c" "split" ",") "toReversed"}}

Preview

c,b,a

Extract a part of a list

Template

{{list (text "a,b,c,d" "split" ",") "slice" 2 4}}

{{list (text "a,b,c,d" "split" ",") "slice" 2 4}}

Preview

c,d

Get a specific item from a list

Template

{{lookup (text "a,b,c,d" "split" ",") 2}}

{{lookup (text "a,b,c,d" "split" ",") 2}}

Preview

c

Looping

Use the each block helper to loop through a list.

Template

{{#each (text "john@briskine.com" "split" "@")}} {{@index}}: {{this}} {{/each}}

{{#each (text "john@briskine.com" "split" "@")}}
{{@index}}: {{this}}
{{/each}}

Preview

0: john 1: briskine.com

Random choice

Insert a random value in your template.

Template

{{random "Hi" "Hello" "Good morning"}}

{{random "Hi" "Hello" "Good morning"}}

Preview

Hello

Insert a random block of content

Template

{{#with (random "1" "2" "3") as |choice|}} {{#if (compare "===" choice "1")}} first block of content {{else if (compare "===" choice "2")}} second block of content {{else}} third block of content {{/if}} {{/with}}

{{#with (random "1" "2" "3") as |choice|}}
{{#if (compare "===" choice "1")}}
first block of content
{{else if (compare "===" choice "2")}}
second block of content
{{else}}
third block of content
{{/if}}
{{/with}}

Preview

third block of content