如何在Nunjucks中循环遍历对象时限制迭代次数

Question

我有一个像这样的js对象：

var data = [
    { src: "src1", name: "name 1" }, 
    { src: "src2", name: "name 2" }, 
    { src: "src3", name: "name 3" }
]

我正在使用Nunjucks循环遍历它：

{% for object in data %}
    {{object.src}}
{% endfor %}

但我希望将迭代次数限制为2。

在Nunjucks中如何实现这个功能？

我知道有一个range选项，但我不知道如何在这种情况下使用它。

- Otus

---

你可以保留一个计数器，在计数器达到2时从循环中退出。 - Abhishek Anand

啊，谢谢提示！这个有效：{% set limit = 0 %} {% for object in data %} {% set limit = (limit+1) %} {% if limit <= 2 %} {{object.src}} {% endif %} {% endfor %} - Otus

Answer 1

有两种不同的方法可以实现这个：

A) 使用 loop.index0 这个特殊变量 (在 Codepen 中查看演示)

在一个 for 循环 中，您可以使用 loop.index0 代替 limit-var。

{% for obj in data %}
    {% if loop.index0 < 2 %}    
        {{obj.src}}: {{obj.name}}
    {% endif %}
{% endfor %}

B）添加自定义过滤器（在 Codepen 中演示）

但更易读的方法是添加自定义过滤器limit并使用它。

var nunjucks  = require('nunjucks');
var env = nunjucks.configure();

var data = [
    {src: "src1", name: "name 1"}, 
    {src: "src2", name: "name 2"}, 
    {src: "src3", name: "name 3"}
];

env.addFilter('limit', function(arr, limit) {
    return arr.slice(0, limit);
});

var res = nunjucks.renderString(`
    {% for obj in data | limit(2) %}
    {{obj.src}}: {{obj.name}}
    {% endfor %}`, 
    {data}
);

console.log(res);

C）使用本地 slice() 函数（在 Codepen 中演示）

{% for obj in data.slice(0, 2) %}
    {{obj.src}}: {{obj.name}}
{% endfor %}

- Aikon Mogwai

---

似乎选项C是最简单和最好的答案。我不清楚为什么这个答案中没有只有选项C。选项B与选项C相同，但更复杂，我看不到任何优点。选项A的缺点是不能停止循环，并且根据上下文可能会导致大量空输出。例如，在我的情况下，HTML中会有额外的空行。这不是什么大问题，但slice()肯定是最好和最有效的选择。 - user131948