循环遍历 nunjucks 中的对象？答案

【问题标题】：Loop through object in nunjucks?循环遍历 nunjucks 中的对象？
【发布时间】：2017-04-19 18:03:26
【问题描述】：

我有一个名为“list.json”的文件，如下所示：

{
  "thing1": "Thing1",
  "thing2": "Thing2",
  "thing3": "Thing3"
}

我怎样才能遍历这个？我想做类似的事情：

{% for item in list%}
  <option>{{ thing }}</option>
{% endfor %}

【问题讨论】：

Loop through object properties nunjucks的可能重复

标签： javascript json nunjucks

【解决方案1】：

你可以试试关注

{% for key, item in list%}
  <option>{{ item }}</option>
{% endfor %}

【讨论】：

它没有循环任何东西。什么都没有出现。默默地失败。
你会画画list吗？我的意思是它是否有对象，或者list 可能没有正确设置
绘画是什么意思？
@JohnDoe - 我的意思是在浏览器中显示，即当你写 {{list}} 时你看到了什么？

【解决方案2】：

您是否已导入 JSON？如果没有，在render JS中，添加一个变量：

list: JSON.parse(fs.readFileSync('list.json'))

如果您多次使用它，请在文件顶部添加一个变量。

var LIST = JSON.parse(fs.readFileSync('list.json'))

也可以使用异步方法，但是需要一些嵌套：

fs.readFile('list.json', function(err, list) {
    env.render('template.html', {
        list: list,
        //other data
    }
}

【讨论】：

【解决方案3】：

如果您使用 Gulp，这可以帮助您：http://www.zell-weekeat.com/nunjucks-with-gulp#Populating-HTML-with-data

【讨论】：

【解决方案4】：

您应该首先在后端创建一个对象数组：

var things = [];

things.push({id : 'thing1', name : 'Thing1'});
things.push({id : 'thing2', name : 'Thing2'});
things.push({id : 'thing3', name : 'Thing3'});

现在在前端你可以像下面这样循环遍历这个数组：

{% for thing in things %}
<option value="{{ thing.id }}"> {{ thing.name }}</option>
{% endfor %}

希望对你有所帮助。

【讨论】：