javascript - pug 中的迭代出错

Question

已添加编辑GIST

我在使用 pug 迭代对象数组时遇到困难:

app.render

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

布局.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"
    }
}]

如果我将哈巴狗代码更改为类似的内容

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

它确实会迭代幻灯片中发送的数据表的正确次数。

此外，如果我执行类似 p= slips[0].type 的操作，它将正确找到该值。

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

发生了什么？

Answer 1

使用这个，你可以用-设置变量，然后用#{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}