如何在 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>

It seems like I'm trying to misuse nunjucks filter, if so how can it be done otherwise?

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

获取品牌列表

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

How to get unique nested array items in Nunjucks (11ty) and loop over it?

javascript

nunjucks

eleventy