How can I emulate Liquid’s where on Nunjucks?

[patrulea]

Using Liquid’s where filter you can very easily subset an array’s content. For example, to list posts that are not a draft: {{ collections.posts | where: "data.draft", false }}.

I’m trying to use Nunjucks’ reject and rejectattr but I’ve had no luck. {{ collections.posts | rejectattr("data.draft") }} renders the whole array, with no effect.

Then I attempted to write a new filter, but my JavaScript is very very limited. This is what I have:

eleventyConfig.addNunjucksFilter("where", function(arr, foo, bar) {
  return arr.filter((entry) => http://entry.data.foo == bar );
});

Then, you can hard-code a custom, filtered collection within .eleventy.js, but I find it a bit impractical because I used to use where to create very different arrays on the fly. Also, I wouldn’t know how to write such collection.

[pdehaan]

I haven't tried using Nunjucks' rejectattr filter yet, but this might get you somewhat closer:

// Useful for trying to compare nested properties...
const _get = require("lodash.get");

module.exports = (eleventyConfig) => {
  eleventyConfig.addNunjucksFilter("where", (arr, key, expected) => {
    if (expected === undefined) {
      return arr.filter(item => !!_get(item, key));
    }
    return arr.filter(item => _get(item, key) === expected);
  });
  // ...
}

{% for post in collections.posts | where("data.draft", false) %}
  <p data-draft="{{ post.data.draft }}">{{ post.data.title }}</p>
{% else %}
  <p>No posts found</p>
{% endfor %}

Not sure that it will work exactly like LiquidJS where implementation, or that my hacky filter doesn't have a few bugs...
I had to add a posts.json directory data file to my ./src/posts/ folder to set the default value for draft to false, and then override it to true in the front matter for a couple templates.

{
  "draft": false,
  "tags": ["posts"]
}

[pdehaan]

Oh, and I was trying to play around with it a bit more... I think I found a solution for not needing to explicitly set draft: false on all the posts using the directory data file. By explicitly checking for an expected === null (instead of undefined) as a default in the filter, I'm now able to pass undefined in my where filter to check for all blog posts where post.data.draft isn't explicitly defined.

eleventyConfig.addNunjucksFilter("where", (arr, key, expected = null) => {
  if (expected === null) {
    return arr.filter(item => !!_get(item, key));
  }
  return arr.filter(item => _get(item, key) === expected);
});

{% for post in collections.posts | where("data.draft", undefined) %}
  <p data-draft="{{ post.data.draft }}">{{ post.data.title }}</p>
{% else %}
  <p>No posts found</p>
{% endfor %}

{
  "tags": ["posts"]
}

[patrulea]

eleventyConfig.addFilter("postIncludesTag", (arr, tag) => {
  return arr.filter(item => {
    // console.log({title: item.data.title, tags: item.data.tags, tag});
    return item.data.tags?.includes(tag);
  });
});

Thank you so so much for your help!

eleventyConfig.addNunjucksFilter("where", (arr, key, expected = null) => {
  if (expected === null) {
    return arr.filter(item => !!_get(item, key));
  }
  return arr.filter(item => _get(item, key) === expected);
});

Is there a way to expect both undefined and null values just in case?

[pdehaan]

Is there a way to expect both undefined and null values just in case?

You could possibly do something like this, but then I think it changes the logic around the default behavior where LiquidJS was trying to match for truthy values if you didn't pass an expected value:

eleventyConfig.addNunjucksFilter("where", (arr, key, expected = null) => {
  if ([null, undefined].includes(expected)) {
    return arr.filter(item => !!_get(item, key));
  }
  return arr.filter(item => _get(item, key) === expected);
});

But now I can't see how to modify that to do the truthy default check AND check for instances where data.draft is undefined.

[patrulea]

Oooh it’s like you can’t have the three of them. Undefined values should be treated as falsy, shouldn’t they?

I’ll stay with the first implementation for now.

[pdehaan]

https://developer.mozilla.org/en-US/docs/Glossary/Falsy and https://developer.mozilla.org/en-US/docs/Glossary/Truthy do a pretty good job of explaining the default truthy-vs-falsy values in JavaScript. Although, LiquidJS and Nunjucks might have their own rules/implementations...
For example, https://liquidjs.com/tutorials/truthy-and-falsy.html.
I don't think Nunjucks has similar docs yet, but I filed mozilla/nunjucks#1268 a while ago and there is an interesting link to the v4 roadmap and a couple interesting truthy related changes.

[patrulea]

{% for post in collections.posts if not post.data.draft %} wouldn’t work either, for some reason.

[pdehaan]

Interesting. Per mozilla/nunjucks#261, I don't think Nunjucks supports that loop filtering syntax.
Looks like it might be on the roadmap for v4 though: mozilla/nunjucks#1059 (although that was like a 3 year old issue).

[edwardhorsford]

I've got a where filter in on one of my projects:

// Filter results for only those containing attribute and value
exports.where = (arr, key, compare) => {
  compare = [].concat(compare) // force to arr
  let filtered = arr.filter(item => {
    return compare.includes(item[key])
  })
  return filtered
}

// Remove items with a specified attribute and value
exports.removeWhere = (arr, key, compare) => {
  compare = [].concat(compare) // force to arr
  let filtered = arr.filter(item => {
    return !compare.includes(item[key])
  })
  return filtered
}

Both of these also accept an array for the compare value. So you could do {{ array | removeWhere('number', ['one', 'two']) }}

[patrulea]

I’d love to try these. How can I implement them? I’m not familiar with this syntax.

[edwardhorsford]

Ah sorry - I store my filters in a separate file to my eleventy stuff.

Wrapped in eleventy syntax:

eleventyConfig.addNunjucksFilter("where", (arr, key, compare) => {
  compare = [].concat(compare) // force to arr
  let filtered = arr.filter(item => {
    return compare.includes(item[key])
  })
  return filtered
})

eleventyConfig.addNunjucksFilter("removeWhere", (arr, key, compare) => {
  compare = [].concat(compare) // force to arr
  let filtered = arr.filter(item => {
    return !compare.includes(item[key])
  })
  return filtered
})

[patrulea]

I tried this snippet with no luck. For example: I used {% for entry in collections.all | removeWhere("data.permalink", false) %} to filter pages with falsy permalink attributes out of the sitemap.

I couldn’t find a use where either filter had an effect.

What could be causing this?

[pdehaan]

I think you might need to use something like lodash.get in order to pluck nested properties like "data.permalink".

This seemed to work for me locally:

+  const _get = require("lodash.get");
  // ...
  eleventyConfig.addNunjucksFilter("removeWhere", (arr, key, compare) => {
    compare = [].concat(compare); // force to arr
    let filtered = arr.filter(item => {
+      return !compare.includes(_get(item, key));
-      return !compare.includes(item[key])
    })
    return filtered;
  });

---
title: removeWhere Test
---

{% for entry in collections.all | removeWhere("data.permalink", false) %}
  title={{ entry.data.title }}; url={{ entry.url | url }}<br/>
{% else %}
  No entries??
{% endfor %}

That should exclude any collection items where the permalink front matter value is explicitly false. If you're trying to do a more complicated falsy permalink check, you might need some more complex logic.

[patrulea]

Now THAT worked. This is the closest I got to emulate Liquid’s where as I remember it. Plus, added functionality with removeWhere.

Thank you 🙏