Array filters

Array filters change the output of arrays.

join

Joins the elements of an array with the character passed as the parameter. The result is a single string.

{{ product.tags | join: ', ' }}

tag1, tag2, tag3

first

Returns the first element of an array.

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | first }}

sale

last

Returns the last element of an array.

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags | last }}

awesome

concat

Concatenates (combines) an array with another array. The resulting array contains all the elements of the original arrays. concat will not remove duplicate entries from the concatenated array unless you also use the uniq filter.

{% assign fruits = "apples, oranges, peaches, tomatoes" | split: ", " %}
{% assign vegetables = "broccoli, carrots, lettuce, tomatoes" | split: ", " %}

{% assign plants = fruits | concat: vegetables %}

{{ plants | join: ", " }}

apples, oranges, peaches, tomatoes, broccoli, carrots, lettuce, tomatoes

You can string together multiple concat filters to combine more than two arrays:

{% assign fruits = "apples, oranges, peaches" | split: ", " %}
{% assign vegetables = "broccoli, carrots, lettuce" | split: ", " %}
{% assign animals = "dogs, cats, birds" | split: ", " %}

{% assign things = fruits | concat: vegetables | concat: animals %}

{{ things | join: ", " }}

apples, oranges, peaches, broccoli, carrots, lettuce, dogs, cats, birds

index

Returns the item at the specified index location in an array. Note that array numbering starts from zero, so the first item in an array is referenced with [0].

<!-- product.tags = "sale", "mens", "womens", "awesome" -->
{{ product.tags[2] }}

womens

map

Accepts an array element's attribute as a parameter and creates an array out of each array element's value.

<!-- collection.title = "Spring", "Summer", "Fall", "Winter" -->
{% assign collection_titles = collections | map: 'title' %}
{{ collection_titles }}

SpringSummerFallWinter

reverse

Reverses the order of the items in an array.

{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}

{{ my_array | reverse | join: ", " }}

plums, peaches, oranges, apples

size

Returns the size of a string (the number of characters) or an array (the number of elements).

{{ 'The quick brown fox jumps over a lazy dog.' | size }}

sort

Sorts the elements of an array by a given attribute of an element in the array.

{% assign products = collection.products | sort: 'price' %}
{% for product in products %}
  <h4>{{ product.title }}</h4>
{% endfor %}

The order of the sorted array is case-sensitive.

<!-- products = "a", "b", "A", "B" -->
{% assign products = collection.products | sort: 'title' %}
{% for product in products %}
   {{ product.title }}
{% endfor %}

A B a b

where

Creates an array including only the objects with a given property value, or any truthy value by default.

All products:
{% for product in collection.products %}
- {{ product.title }}
{% endfor %}

{% assign kitchen_products = collection.products | where: "type", "kitchen" %}

Kitchen products:
{% for product in kitchen_products %}
- {{ product.title }}
{% endfor %}

All products:
- Vacuum
- Spatula
- Television
- Garlic press

Kitchen products:
- Spatula
- Garlic press

uniq

Removes any duplicate instances of elements in an array.

{% assign fruits = "orange apple banana apple orange" %}
{{ fruits | split: ' ' | uniq | join: ' ' }}

orange apple banana