如何在 Nunjucks (11ty) 中获取唯一的嵌套数组项并循环遍历它？

问题描述

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

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

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

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

如您所见，有一个分类条目列表，每个条目都有自己的品牌列表。我需要遍历所有独特品牌并使用 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',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>

解决方法

不确定您缺少什么，您的代码看起来不错。您可以使用 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 获取品牌列表。