How to work with arrays and lists
Arrays output
To iterate through and output each element of the array, you can use helper #each.
Imagine that you made a request to your customer accounting system, made a list of employees' names from it and wrote it to variable "names". We want to make it so that a client can choose one of the employees.
Inside variable "names", this list might look like this:
["Alex", "John", "Andrew", "Martin"]
Each element of the array inside #each is available as variable "this":
Send me the name of the employee you would like to apply to:
{{#each names}}
{{this}}
{{/each}}
The client will receive a message:
Send me the name of the employee you would like to apply to: Alex John Andrew Martin
Inside #each, special variable @index is also available. This is the ordinal number of the element. There is one feature - #each numbers arrays from zero:
Send me the name of the employee you would like to apply to:
{{#each names}}
{{@index}}. {{this}}
{{/each}}
You get:
Send me the name of the employee you would like to apply to: 0. Alex 1. John 2. Andrew 3. Martin
We can use any linear helpers inside body #each and easily correct the numbering by adding with one:
Send me the name of the employee you would like to apply to:
{{#each names}}
{{add @index 1}}. {{this}}
{{/each}}
Now you get the text the way you intended:
Send me the name of the employee you would like to apply to: 1. Alex 2. John 3. Andrew 4. Martin
Objects in arrays and lists
Arrays can contain not only simple data like strings as in the previous example. There may also be nested objects in it.
Let's say we asked your customer accounting system for a list of employees in the form of objects and wrote it to variable "staff". Our list in variables may look like this:
[
{
"id": 12345,
"name": "Alex",
"rating": 5
},
{
"id": 12346,
"name": "John",
"rating": 5
},
{
"id": 12347,
"name": "Andrew",
"rating": 3
},
{
"id": 12348,
"name": "Martin",
"rating": 4
}
]
We can work with such lists in the same way as with simple ones:
Send me the name of the employee you would like to apply to:
{{#each staff}}
{{!-- this now is not a string with a name, but the name of the current object --}}
{{!-- we can access the internal variable `name` via this.name --}}
{{add @index 1}}. {{this.name}}
{{/each}}
As you can see, everything is as simple as with strings.
When we work with objects inside lists, we can omit "this" and write the name of the internal variable. Let's additionally send the rating to a client:
Send me the name of the employee you would like to apply to:
{{#each staff}}
{{!-- this can be omitted --}}
{{add @index 1}}. {{name}} — rating: {{rating}}
{{/each}}
You will get this message:
Send me the name of the employee you would like to apply to: 1. Alex — rating: 5 2. John — rating: 5 3. Andrew — rating: 3 4. Martin — rating: 4
If we suddenly need to get something from a variable outside the array, inside #each we can go back up and read the desired variable using ../.
Imagine that we asked the client which employee rating he is most interested in, and we want to send all the names where the rating is the same or even better. Again, imagine that we write the rating that he sent to variable "min":
Send me the name of the employee you would like to apply to:
{{#each staff}}
{{!-- Comment: `../` — we left the array --}}
{{!-- Comment: `../min` — we left the array and got `min` --}}
{{#gte rating ../min}}
{{!-- Comment: if `../min` equal or greater `rating` --}}
{{add @index 1}}. {{name}} might be right for you. Rating: {{rating}}
{{else}}
{{!-- Comment: if `../min` less `rating` --}}
{{add @index 1}}. {{name}} does not seem to be right for you. Rating: {{rating}}
{{/gte}}
{{/each}}
If min = 4, you will get this message:
Send me the name of the employee you would like to apply to: 1. Alex might be right for you. Rating: 5 2. John might be right for you. Rating: 5 3. Andrew does not seem to be right for you. Rating: 3 4. Martin might be right for you. Rating: 4
If you need to send the list in parts, we recommend using these instructions →
The array can be cleared with the Assign variable component with the Empty List data type. The variable name must contain the name of the list to be cleared.