Array Filter

by Marc Staine

Last updated: 29-Oct-2015

Array filters are used to modify the output of arrays.

• join
• first
• last
• index
• map
• size
• sort

join

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

Input

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

Output

tag1, tag2, tag3

first

Returns the first element of an array.

Input

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

Output

sale

first can be used in dot notation, in cases where it needs to be used inside a tag.

{% if product.tags.first == "sale" %}
 This product is on sale!
{% endif %}

last

Gets the last element passed in an array.

Input

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

Output

awesome

last can be used in dot notation, in cases where it needs to be used inside a tag.

{% if product.tags.last == "sale"%}
 This product is on sale!
{% endif %}

Using last on a string returns the last character in the string.

Input

<!-- product.title = "Awesome Shoes" -->
{{ product.title | last }}

Output

s

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].

Input

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

Output

womens

map

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

Input

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

Output

SpringSummerFallWinter

size

Returns the size of a string or an array.

Input

{{ 'is this a 30 character string?' | size }}

Output

30

size can be used in dot notation, in cases where it needs to be used inside a tag.

{% if collections.frontpage.products.size > 10 %}
 There are more than 10 products in this collection!
{% endif %}

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.

Input

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

Output

A B a b