Working with Arrays: A Deep Dive into Concat, Join, Map, and Compact Filters

Shopify Liquid provides a rich set of filters to help you manipulate and manage arrays. Among these filters, concat, join, map, and compact are particularly useful for combining, transforming, and cleaning up arrays. Together they can achieve complex operations on arrays efficiently.

The concat Filter

The concat filter is used to combine two arrays into a single array. It is particularly helpful when you need to merge data from different sources or create a combined list of items for display.

Usage:

{% assign array1 = "1, 2, 3" | split: ", " %}
{% assign array2 = "4, 5, 6" | split: ", " %}
{% assign combined_array = array1 | concat: array2 %}
{{ combined_array }}
{# Output: '1, 2, 3, 4, 5, 6' #}

In the example above, the concat filter is used to merge 'array1' and 'array2' into a single array named 'combined_array'.

The join Filter

The join filter is used to convert an array into a string by concatenating its elements, separated by a specified delimiter. This filter can be helpful when you need to display a list of items as a single string or pass an array to a JavaScript function as a single value.

Usage:

{% assign colors = "red, green, blue, yellow" | split: ", " %}
{{ colors | join: " | " }}
{# Output: 'red | green | blue | yellow' #}

In the example above, the join filter is used to convert the 'colors' array into a single string, with elements separated by the pipe character '|'.

The map Filter

The map filter is used to extract a property value from each element in an array and create a new array containing those extracted values. This filter is especially useful when you need to display specific attributes of items in a collection or create a new array with values derived from existing elements.

Usage:

{% assign products = collections.all.products %}
{% assign product_titles = products | map: 'title' %}
{{ product_titles }}
{# Output: An array containing the titles of all products #}

In the example above, the map filter is used to extract the 'title' property from each product in the 'products' array, creating a new array called 'product_titles'.

The compact Filter

The compact filter is used to remove any null or empty values from an array, resulting in a clean array with no empty elements. This filter is helpful when you want to remove empty or invalid data from an array before processing it further or displaying it to users.

Usage:

{% assign mixed_array = "apple, , orange, , banana, " | split: ", " %}
{{ mixed_array | compact }}
{# Output: 'apple, orange, banana' #}

In the example above, the compact filter is used to remove the empty elements from the 'mixed_array', resulting in a clean array with only valid values.

Using Filters Together

These filters can be used together to achieve complex operations on arrays. For example, you might want to combine two arrays, extract a specific property from each element, and then remove any empty values from the resulting array.

{% assign array1 = collections.all.products %}
{% assign array2 = collections.frontpage.products %}
{% assign combined_array = array1 | concat: array2 %}
{% assign product_prices = combined_array | map: 'price' %}
{% assign cleaned_prices = product_prices | compact %}
{{ cleaned_prices }}
{# Output: An array containing the prices of all products from both arrays, with empty values removed #}

In this example, we've used concat, map, and compact filters together to create a clean array of product prices from two different collections.