concat¶

The concat filter is designed to concatenate arrays or values. It offers flexibility by handling both array and non-array inputs, providing different merging behaviors.

Functionality

Merging Arrays: If both the input value and the argument are arrays, the concat filter combines their elements into a single array.
Adding to Arrays: If one input is an array and the other is a single value, the single value is appended to the end of the array.
Merging Values: If both inputs are single values (non-arrays), they are treated as a two-element array and combined.

Syntax

{{ array_variable | concat: value_to_append }}

Arguments

value_to_append: This is the value you want to concatenate or append to the original array. It can be another array or a single value.

Code Samples

Example 1: Concatenating Two Arrays

{% assign colors = "red,green,blue" | split: "," %}
{% assign more_colors = "yellow,purple" | split: "," %}

{{ colors | concat: more_colors }}

Output:

red,green,blue,yellow,purple

Example 2: Adding a Single Value to an Array

{% assign fruits = "apple,banana,orange" | split: "," %}

{{ fruits | concat: "grape" }}

content_copy

Output:

apple,banana,orange,grape

Example 3: Merging Two Single Values

{{ "hello" | concat: "world" }}

Output:

hello,world

Outliers and Special Cases¶

Empty Arrays: If one or both inputs are empty arrays, the result will be an empty array or the non-empty array if only one is empty.
Non-Array Inputs: If neither input is an array, the filter creates a new array containing both values.
Nested Arrays: Currently, the concat filter does not handle nested arrays; it flattens any nested arrays it encounters.

Key Points¶

The concat filter is highly versatile for combining data in your Experience Builder templates.
It intelligently adapts its behavior based on whether you're working with arrays or single values.
Remember that it doesn't inherently support deeply nested arrays. If you need to preserve nesting, consider using other techniques or custom filters.