Filters for Data Arrays in 11ty

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

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);
});

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);
});

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);
});

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.

Version 1: Check against a value array:

{%- 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]));
});

Version 2: Check against a single attribute

// Useful for getting a subset based on a secondary data list
{% for category in categories %}
// Then pluck just items in that "category"
{% for post in collections.all | pluck(category, 'category') %}

eleventyConfig.addFilter("pluck", function (arr, value, attr) {
  return arr.filter((item) => item.data[attr] === value);
});