如何在Nunjucks (11ty)中获得唯一的嵌套数组项并循环它?

Question

我有以下类型的无头CMS的数据:

type Assortiment = {
list: Array<Item>
// ...
}
type Item = {
brands: Array<Brand>
// ...
}
type Brand = {
logo: string,
title: string,
}

可以看到，有一个分类条目列表，每个条目都有自己的品牌列表。我需要循环遍历所有唯一的品牌，并在页面上展示它们。

我试着写一个自定义过滤器，但不能让它在nunjucks循环中工作。JS会像这样:

eleventyConfig.addFilter('uniqueBrands', (assortiment) => {
const brands = assortiment.list.flatMap(item => item.brands)
const map = new Map(brands.map(b => [b.logo, b.title]))
return [...map.entries()]
})

如何使用:

<ul>
<!-- not sure if I apply a filter correctly below... -->
{% for logo, title in (assortiment.list | uniqueBrands) %}
<li>
<img src="{{logo}}" alt="{{title}}" title="{{title}}" />
</li>
{% endfor %}
</ul>

我的技术堆栈是11ty + Nunjucks + netflix CMS。
看起来我好像在误用nunjks过滤器，如果是这样，怎么能不这样做呢?

---

get it working, final solution:

// filters
cfg.addFilter('flatMap', (list, key) => list.flatMap((x) => x[key]))
cfg.addFilter('unique', (list, key) => {
const map = new Map(list.map((x) => [x[key], x]))
return [...map.values()]
})
// render
<ul>
{% for brand in (assortiment.list | flatMap('brands') | unique('logo')) %}
<li>
<img src="{{brand.logo}}" alt="{{brand.title}}" />
</li>
{% endfor %}
</ul>

Answer 1

不知道你错过了什么，你的代码看起来很好。在Nunjucks中使用管道操作符应用过滤器:

<ul>
{% for logo, title in (assortiment | uniqueBrands) %}
<li>
<img src="{{ logo }}" alt="{{ title }}" title="{{ title }}">
</li>
{% endfor %}
</ul>

看起来我在试图滥用nunjucks过滤器，如果是这样的话，怎么能不这样做呢?

用你独特的品牌创建一个系列可能会更容易。你的JS代码几乎可以保持不变，但你需要使用collection API来获取品牌列表。