如何在 Nunjucks (11ty) 中获取唯一的嵌套数组项并对其进行循环？

Question

我有来自以下类型的无头 CMS 的数据：

type Assortiment = {
  list: Array<Item>
  // ...
}

type Item = {
  brands: Array<Brand>
  // ...
}

type Brand = {
  logo: string,
  title: string,
}

如您所见，有一个分类条目列表，每个条目都有自己的品牌列表。我需要遍历所有 unique 品牌并使用 nunjucks 在页面上显示它们。

我尝试为此编写一个自定义过滤器，但无法让它在 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 + Netlify CMS。
看来我正在尝试滥用 nunjucks 过滤器，如果是这样，否则怎么办？

---

得到它的工作，最终解决方案：

// 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

不确定您缺少什么，您的代码看起来不错。您可以使用pipe operator 在 Nunjucks 中应用过滤器：

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

似乎我在尝试滥用 nunjucks 过滤器，如果是这样，否则怎么办？

使用您的独特品牌创建collection 可能会更容易。您的 JS 代码可以保持几乎相同，但您需要使用集合 API 获取品牌列表。