Skip to content

Filters for Data Arrays in 11ty

Posted on: Nov 23, 2020 by Stephanie Eckles
🍿 3 min. read

Learn several ways to randomly pick or subset data, or limit the returned results from a data array.

These filters can be used on Eleventy collections or any custom data that presents as an array.

#randomItem Filter

Return a randomly picked item from a given array.

Usage: {{ for item in collections.all | randomItem }}

eleventyConfig.addFilter("randomItem", (arr) => {
arr.sort(() => {
return 0.5 - Math.random();
});
return arr.slice(0, 1);
});

#limit Filter

Return a subset of array items limited to the passed number.

Usage: {{ for item in collections.all | limit(3) }}

eleventyConfig.addFilter("limit", function (arr, limit) {
return arr.slice(0, limit);
});

#randomLimit Filter

Given a collection and a limit in addition to the current page.url, returns the requested number of items excluding the current one. This is useful for showing additional posts without the current one being repeated in the list.

Usage: {{ for item in collections.all | randomLimit(3, page.url) }}

eleventyConfig.addFilter("randomLimit", (arr, limit, currPage) => {
// Filters out current page
const pageArr = arr.filter((page) => page.url !== currPage);

// Randomizes remaining items
pageArr.sort(() => {
return 0.5 - Math.random();
});

// Returns array items up to limit
return pageArr.slice(0, limit);
});

#pluck Filter

The pluck filter is useful if you want to return a subset of an array based on some known attribute values, such as given an array of titles.

Usage:

{%- set pickedPosts %}
["Title A", "Title B"]
{%- endset -%}
{% for post in collections.all | pluck(pickedPosts, 'title') %}
eleventyConfig.addFilter("pluck", function (arr, selections, attr) {
// Assumes this is receiving a collection, hence the `data`
// If custom array such as from _data, update accordingly
return arr.filter((item) => selections.includes(item.data[attr]));
});
View more config samples