使用pug / jade迭代一组对象

Question

使用带有express的节点，我查询了我的数据库并返回了一个对象数组 - 通过控制台记录数组验证。

我现在需要遍历对象数组，抓取我需要的键/值对，并使用pug将它们作为列表打印到html。

Pug的迭代文档说明了这一点：

ul
  each val in [1, 2, 3, 4, 5]
    li= val

在我的app.js文件中，这是我用来呈现页面的代码：

app.get('/', function (req, res) {
        res.render('index', {storeItems: results});
});

在我的pug文件中，我正在使用这种语法。

.col-6
  ul.list-group
    each storeItem in storeItems
       li.list-group-item storeItem.product_name

运行此代码会产生以下错误。

无法读取未定义的属性“长度”。它说错误在这一行：

each storeItem in storeItems

我没有看到我需要在pug文档中声明数组的长度。我错过了什么？我尝试将.length添加到storeItems - 生成相同的错误。我尝试在li之后使用=符号也会产生相同的错误。

Answer 1

试试这个，

.col-6
  ul.list-group
    each storeItem in storeItems
       li.list-group-item=  storeItem.product_name // missed **equal to** operator here

Answer 2

正如@ kaysser-kayyali所说，请检查=。我遇到了完全相同的问题，并且=解决了问题：

.col-6
    ul.list-group
        each storeItem in storeItems
            li.list-group-item= storeItem.product_name

Answer 3

您需要将返回对象的数组转换为具有单个属性的对象，该属性的值是返回对象的数组。在您的示例中，您已将对象数组存储在“ storeItems”数组中。而是创建一个对象{storeItems：[您的对象数组在这里]}，然后您的迭代应该可以工作。

Answer 4

另一种可能的解决方案是更改

  

=

对于

  

！{foo}

然后更改每个语句并添加索引，我一直使用这种结构，它应该可以工作。

示例：

.col-6
    ul.list-group
        - console.log(storeItems)
        each storeItem, index in storeItems
            - console.log(storeItem)
            li.list-group-item !{storeItem.product_name}