使用 pug/jade 遍历对象数组答案

【问题标题】：Using pug/jade to iterate over an array of objects使用 pug/jade 遍历对象数组
【发布时间】：2018-04-06 19:55:18
【问题描述】：

使用带 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 之后使用 = 符号，这也会产生相同的错误。

【问题讨论】：

对 Pug 不是很熟悉，但是文档说要在元素标签 pugjs.org/language/iteration.html 之后添加一个 = 不知道您是否缺少 li.list-group-item= storeItem.product_name 中的 = 和它只是在堆栈中抛出一个错误。
我最好的猜测是 storeItems 既不是数组也不是对象。尝试硬编码值results
@KaysserKayyali 我已经尝试过了，它仍然返回相同的错误。
@maioman 我通过 ejs 让它工作得很好，而且迭代得很好。但由于其他原因，我不得不改用翡翠/哈巴狗。在 ejs 中，我使用了 storeItems.length，因为它具有更传统的 js 语法，而且效果很好。
请添加您的 console.log(results) 并在您的问题中写下 console.log 的打印内容

标签： javascript node.js express pug

【解决方案1】：

试试这个，

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

【讨论】：

正如我在最初的帖子中所说的那样。我也试过了。但我确实再试了一次，它在同一行返回相同的错误。
我运行 typeof 并返回对象。所以这一定是原因。
尝试 Object.prototype.toString.call(array_name)，它必须返回类似“[object Array]”的数组。否则，数组也被视为 javascript 中的对象，因此 typeof 也会为数组返回“对象”。
我更新了帖子以显示返回数据库查询返回的内容。
@J.G.Sable。为什么你的数组像 [rawdatapacket{..}, rawdatapacket{...} ...] 而不是 [{}],{}..]

【解决方案2】：

正如@kaysser-kayyali 所说，检查 =。我遇到了同样的问题，= 解决了这个问题：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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}

【讨论】：