哈巴狗错误的迭代

Question

编辑添加GIST

我在使用 pug 遍历对象数组时遇到了困难：

app.render

response.render('layout', {
    title: 'Visual Display',
    slides: shuffledData
});

layout.pug

html
    head
        title= title
    body
        each slide in slides
            p= slide.type

错误信息

TypeError: /home/chris/Projects/visualdisplay/src/views/layout.pug:6
   4|     body
   5|         each slide in slides
 > 6|             p= slide.type

Cannot read property 'type' of undefined
   at eval (eval at wrap (/home/chris/Projects/visualdisplay/node_modules/pug-runtime/wrap.js:6:10), <anonymous>:23:62)

如果我将 reponse.render 更改为 response.send（查看正在发送的数据），我会得到： 我已经编辑了示例中的一些数据值

[{
    "type": "achievement",
    "studentCode": 110399,
    "studentFirstName": "xx",
    "studentMiddleName": "xx",
    "studentLastName": "xx",
    "studentHouse": "Eagles",
    "achievementType": "Academic",
    "achievementDescription": "well done in house point competition in maths",
    "achievementDate": "2017-02-23T00:00:00.000Z",
    "staffPreferredFirstName": "",
    "staffFirstName": "xx",
    "staffLastName": "xx"
}, {
    "type": "achievement",
    "studentCode": 102797,
    "studentFirstName": "xx",
    "studentMiddleName": "xx",
    "studentLastName": "xx",
    "studentHouse": "Oryx",
    "achievementType": "Academic",
    "achievementDescription": "Well done in revision Kahoot on exponents and natural logs",
    "achievementDate": "2017-02-23T00:00:00.000Z",
    "staffPreferredFirstName": "",
    "staffFirstName": "xx",
    "staffLastName": "xx"
}, {
    "type": "tweet",
    "user": {
        "name": "xx",
        "screenName": "xx",
        "description": "",
        "profileImage": "xx"
    },
    "tweet": {
        "date": "Mon Feb 20 16:21:04 +0000 2017",
        "text": "xx",
        "mediaURL": "xx"
    }
}]

如果我将 pug 代码更改为类似

html
    head
        title= title
    body
        each slide in slides
            p testline

它确实会在正确的次数上迭代以幻灯片形式发送的数据表。

另外，如果我执行 p= slides[0].type 之类的操作，它会正确找到值。

我正在使用来自 npm 的最新 pug 和 express。

发生了什么？

Answer 1

使用这个，你可以用-设置vars，然后用#{varName}打印值，如果你想渲染值（例如你有一些html标签），你可以使用!{varName}

 html
 head
        title= title
    body
        each slide in slides
          -slideType = slide.type
           #{slideType}

作为一个简单的工作示例，您可以使用外部jade (pug) 到 html 转换器：

-slides = [{"id":"1", "type":"html", "value":"<strong>strong text</strong>"}, {"id":"2", "type":"plain-text", "value":"plain text"}]

    each slide in slides
       div !{slide.value}
       div #{slide.value}