Javascript 如何在Nunjuck（11ty）中获得唯一的嵌套数组项并在其上循环？

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

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

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

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

我想如何使用它：

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

{标识的百分比，标题在（schomkiment.list | uniqueBrands）%}


{%endfor%}

我的技术堆栈是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>

//过滤器
cfg.addFilter（'flatMap'，（list，key）=>list.flatMap（（x）=>x[key]））
cfg.addFilter（'唯一'，（列表，键）=>{
常量映射=新映射（list.map（（x）=>[x[key]，x]））
返回[…map.values（）]
})
//渲染

{中品牌的百分比（schodkiment.list | flatMap（'brands'）| unique（'logo'））%}


{%endfor%}

不确定您缺少什么，您的代码看起来很好。使用以下命令在Nunjuck中应用过滤器：

{标识的百分比，标题在（组合|唯一品牌）%}


{%endfor%}

似乎我在试图滥用nunjucks过滤器，如果是这样，怎么能不这样做呢

---

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

{%forX-in（data | myFilter）%}

是否可以循环自定义筛选结果（假设筛选返回数组）？我更新了我的snippet@amankkg是的，应该行。这对你不起作用吗？你看到了什么输出？有错误信息吗？是的，它很有效，看起来我第一次尝试时忽略了一些东西

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

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