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.

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

You can use first with dot notation when you need to use the filter inside a tag.

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

last

Returns the last element of an array.

Input

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

Output

awesome

You can use last with dot notation when you need to use the filter 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

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.

Input

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

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

{{ plants | join: ", " }}

Output

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

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

Input

{% 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: ", " }}

Output

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

Input

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

Output

womens

map

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

Input

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

Output

SpringSummerFallWinter

reverse

Reverses the order of the items in an array.

Input

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

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

Output

plums, peaches, oranges, apples

size

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

Input

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

Output

42

You can use size with dot notation when you need to use the filter 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

where

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

Input

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 %}

Output

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

Kitchen products:
- Spatula
- Garlic press

You can use a property name with where that has no target value when that property is a boolean or truthy. For example, the available property of products.

Example

{% assign available_products = collection.products | where: "available" %}

Available products:
{% for product in available_products %}
- {{ product.title }}
{% endfor %}

uniq

Removes any duplicate instances of elements in an array.

Input

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

Output

orange apple banana

On this page