A bunch of useful array filters for 11ty.
Install:
npm install @jamshop/eleventy-plugin-array-filters
In your main config .eleventy.js
:
const pluginArrayFilters = require("@jamshop/eleventy-plugin-array-filters");
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(pluginArrayFilters);
// and the rest of your config
};
Or import an individual filter:
const { unique } = require("@jamshop/eleventy-plugin-array-filters");
module.exports = (eleventyConfig) => {
eleventyConfig.addFilter("unique", unique);
// and the rest of your config
};
Filters include:
isArray
isNotArray
isEmpty
isNotEmpty
flat
ampersandList
sentenceList
ul
ol
dl
sum
All examples assume the following front-matter data is available and use nunjucks templates.
---
fruits: ["banana", "mango", "peach", "apple", "apple", "kiwi", "strawberry"]
count: [1, 3, 5, 1, 2, 3]
empty: []
nested: [["banana"], ["mango","peach"]]
---
{% if fruits | isArray %}
<p>Yes, "fruits" is an array</p>
{% endif %}
{% if "notArray" | isNotArray %}
<p>Yes, the string "notArray" is not an array.</p>
{% endif %}
{% if empty | isEmpty %}
<p>Yes, "empty" is empty.</p>
{% endif %}
{% if fruits | isNotEmpty %}
<p>Yes, "fruits" is not empty.</p>
{% endif %}
Result: <p>There are 7 fruits in the array.</p>
<p>
nested has {{ nested | count }} items,
but "nested | flat: has {{ nested | flat | count }} items.
</p>
Result: <p>nested has 2 items, but "nested | flat" has 3 items</p>
<p>{{ fruits | ampersandList }}</p>
Result: banana, mango, peach, apple, apple, kiwi & strawberry
<p>{{ fruits | sentenceList }}</p>
Result: banana, mango, peach, apple, apple, kiwi and strawberry
{{ fruits | ul | safe }}
Result:
<ul>
<li>banana</li>
<li>mango</li>
<li>peach</li>
<li>apple</li>
<li>apple</li>
<li>kiwi</li>
<li>strawberry</li>
</ul>
{{ fruits | ol | safe }}
Result:
<ol>
<li>banana</li>
<li>mango</li>
<li>peach</li>
<li>apple</li>
<li>apple</li>
<li>kiwi</li>
<li>strawberry</li>
</ol>
{{ fruits | dl | safe }}
Result:
<dl>
<dt>banana</dt>
<dt>mango</dt>
<dt>peach</dt>
<dt>apple</dt>
<dt>apple</dt>
<dt>kiwi</dt>
<dt>strawberry</dt>
</dl>
<p>The sum of count is: {{ count | sum }}</p>
Result: The sum of count is: 15