Creating collection based on subset of global data file

[jeremybjeffery]

Hi,

I've been searching everywhere for a solution to my specific issue but have yet to find something that works (or that I can make work). A quick caveat: I'm mainly a designer/html/css person so I'm brand new to 11ty and js, so please have mercy on me :)

The Background
I have a fairly simple json file in the _data folder called products.json that holds some product info. The file is structured like:

[
  {
    "category": "category1",
    "items": [
      {
        "name": "Product Name",
        "color": "some color",
        "featured": true,
        "excerpt": "A short description about the product would go here.",
        "description": "A complete product description of the product.",
        "price": 30,
      },
      {
        "name": "Another Name",
        "color": "some color",
        "featured": false,
        "excerpt": "A short description about the product would go here.",
        "description": "A complete product description of the product.",
        "price": 30,
      },
  {
  "category": "category 2",
  "items": [
    {
      "name": "Another Name",
        "color": "some color",
        "featured": false,
        "excerpt": "A short description about the product would go here.",
        "description": "A complete product description of the product.",
        "price": 30,
    },
    {
       "name": "Product Name",
        "color": "some color",
        "featured": true,
        "excerpt": "A short description about the product would go here.",
        "description": "A complete product description of the product.",
        "price": 30,
    }
]

For the most part 11ty and Nunjucks let me do everything I need to do. But the thing that's tripping me up is the 'featured: true' property. Rather than using nested for statements with Nunjucks, I'd like to create a custom collection (e.g. collections.featProducts) from this data that gives me the featured products.

The most central reason why I'd like to create a collection is so I have an easy way to limit the output (e.g. for product in collections.featProducts | limit(3) ). I haven't been able to work this out in Nunjucks.

If there's way to do that then I'd be happy to hear that as well :)

Back to the original question: I have found several resources that get me part of the way there, but unfortunately I haven't been able to work out the proper way to filter the data down to the correct subset of objects.

The Collection

So far the best starting point I have is a combination of what's shown on 11ty.rocks (https://11ty.rocks/eleventyjs/collections/) and the 11ty collections documentation.

That basically looks like...

eleventyConfig.addCollection("featProducts", (collectionApi) => {
  const allItems = collectionApi.getAll()[0].data.products;

  return allItems.filter((item) => {
    // ...
  });
});

It's that "// ..." void where I've tried all sorts of approaches to no avail.

I've looked all over StackOverflow and various google results, but everything I've come across for filtering the array to return the correct objects doesn't seem to work within the .eleventy.js config file. Using dot notation always seems to fire off an error along the lines of 'can't get length of undefined'.

As I'm sure is clear, I don't really know what I'm doing on this front but I'm certain someone here knows exactly what to do.

Thank you in advance to anyone who reads this! And apologies if I managed to miss this exact answer somewhere after googling about 400 permutations of "eleventy create collection from custom data".

[pdehaan]

Do you have a public repo I can try cloning?

Also, what is a featured product? Is it specific to each category? Or are you expecting to merge all category's items into a single array and then filter all featured:true products?

[jeremybjeffery]

Thanks very much for taking the time to look at this!

I don't have a public repo at the moment but I will try to create one that is limited to the question.

As far as featured product's purpose, the idea was to have a specialized collection of products that could be drawn from any category -- sort of the same idea as having 'on sale' products.

As far as my intention, it would be the last thing you said -- to merge all category items into an array and filter the featured:true products.

[pdehaan]

Cool. OK, well, I can think of three random solutions (in no particular order).

1. If you have an array of categories/items in src/_data/products.js you could create another global data file named src/_data/feat_products.js that just does the filtering for you.

   const products = require("./products");
   
   module.exports = products.reduce((arr, category) => {
     return arr.concat(category.items.filter(product => product.featured));
   }, []);

   Now, just use something like {% for product in feat_products %}..{% endfor %}.

2. If you want a collection, you could just load the global src/_data/products.js and do the filtering and return it as a collection (although possibly not as clear as a global data file). Although if you were paginating over a global data file to generate product pages, you could possibly make this work by using the collectionApi.getFilteredByTag() or something.

   // .eleventy.js snippet
   const products = require("./src/_data/products");
   eleventyConfig.addCollection("featProducts", (collectionApi) => {
     return products.reduce((arr=[], category) => {
       return arr.concat(category.items.filter(product => product.featured));
     }, []);
   });

3. Perhaps my least favorite option, but you could abuse some pagination with a JavaScript front matter and before callback to filter the data.

   ---js
   {
     pagination: {
       data: "products",
       size: 1000,
       alias: "feat_products",
       before(data) {
         return data.reduce((arr=[], category={}) => {
           return arr.concat(category.items.filter(product => product.featured));
         }, []);
       }
     }
   }
   ---
   
   {% for product in feat_products %}
     <p>{{ product.name }} / ${{ product.price }}</p>
   {% endfor %}

   This will loop over the global src/_data/products.js file with an arbitrary page size of 1000 (if you have more than 1000 featured products, it will try and create additional pages). Then it will just use the before() callback.

4. Bonus idea... Chain a bunch of filters. Possibly ugly, but it might look something like the following pseudo Nunjucks code:

   {% for product in products | flatten | is_featured %}..{% endfor %}

   So you'd need a flatten filter which merges all the categories into a single array. Then another custom is_featured which filters the single array for featured products. You could probably make one filter that does both, but not sure if there is a benefit to two smaller, potentially more reusable filters.

[pdehaan]

    // .eleventy.js snippet
    eleventyConfig.addFilter("flatten", (products = []) => 
      products.map(category => category.items).flat()
    );

    eleventyConfig.addFilter("is_featured", (products = []) =>
      products.filter((product) => product.featured)
    );

    eleventyConfig.addFilter("limit", (arr = [], count = 5) => arr.slice(0, count));

---
title: Option Four
---

{% for product in products | flatten | is_featured | limit(2) %}
  <p>{{ product.name }} => ${{ product.price }}</p>
{% endfor %}

<hr/>

<h2>Featured products in Category 2</h2>

{% for product in products[1].items | is_featured %}
  {{ product.name }}
{% endfor %}

[jeremybjeffery]

Thank you! I tried option 1 and it absolutely solves the specific question I posed.

As you noted, I'm able to use {% for product in feat_products %}..{% endfor %} and this also allows me to limit the returned items with a limit() filter.

I really appreciate your help -- and your super-fast response!

And I just saw your note with the filters. Amazing! I will take a closer look at that as well.

You are a legend :)

[jeremybjeffery]

The filters are excellent -- and provide some additional flexibility. I think that's the approach I will use going forward.

Thank you again!

[jeremybjeffery]

One quick addition in case it's of use to anyone in the future:

I took suggestion 2 from @pdehaan and modified it based on the 11ty docs and 11ty.rocks resources to create a featuredProducts collection. It's fundamentally the same as that 2nd option but is structured slightly differently and doesn't need the require step:

eleventyConfig.addCollection('featProducts', (collectionApi) => {
    const allData = collectionApi.getAll()[0].data.products
    return allData.reduce((arr = [], category) => {
      return arr.concat(category.items.filter((product) => product.featured))
    }, [])
  })

Thanks again to @pdehaan for the help!