Filters for Data Arrays in 11ty

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