开发者问题收集

尝试在 Pug 中迭代 JSON 但一直出现长度错误

2020-11-17
455
node.js json express command-line-interface pug

我正在使用 express 和 pug。

这是 index.js 文件： 

app.get('/', function(req, res) {
    var bookStore = [
        {
            title: "Templating with Pug",
            author: "Winston Smith",
            pages: 143,
            year: 2017
        },
        {
            title: "Node.js will help",
            author: "Guy Fake",
            pages: 879,
            year: 2015
        }
    ];
    res.render("index", {
        bookStore: bookStore
    });
});

这是 pug 模板： 

each book in bookStore
    ul
        li= book.title
        li= book.author
        li= book.pages
        li= book.year

每次我尝试使用 pug cli 翻译 index.pug 文件时，都会出现此错误： 

TypeError: index.pug:1
  > 1| each book in bookStore
    2|     ul
    3|         li= book.title
    4|         li= book.author

Cannot read property 'length' of undefined
    at eval (eval at wrap (C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:6:32)
    at eval (eval at wrap (C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:53:4)
    at template (eval at wrap (C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:54:3)
    at renderFile (C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\index.js:285:40)
    at C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\index.js:149:5
    at Array.forEach (<anonymous>)
    at Object.<anonymous> (C:\Users\\AppData\Roaming\npm\node_modules\pug-cli\index.js:148:9)
    at Module._compile (internal/modules/cjs/loader.js:1158:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
    at Module.load (internal/modules/cjs/loader.js:1002:32) {
  path: 'index.pug'
}

起初我对我的代码没有信心。但这是一个据称可以工作的示例： https://pug.programmingpedia.net/en/tutorial/9545/iteration-with-pug

我做错了什么，似乎由于 pug cli 不“知道”bookStore 变量，它不会编译……但这不是模板的原理吗？ 我错过了一些声明还是什么？

2个回答

您需要使用 express 来执行 开始使用 pug 中提到的操作，而不是使用 cli。

首先，运行 npm install express pug 来安装包。

其次，使用以下代码设置您的 server.js。 

// server.js
const express = require('express')
const app = express()

// setup template you want to use.
app.set("view engine", "pug")

app.get('/', function (req, res) {
  res.render('index', {test: [1,2,3]})
})

app.listen(8080)

第三，使用以下内容将您的 index.pug 设置为“views/index.pug”。 

div
    each val in test
        ul
            li= val

现在您的文件夹结构将如下所示。 

|-- node_modules
|-- server.js
|-- views
|----|---index.pug

第四，通过 node server.js 启动您的服务器。

最后，在浏览器中输入 http://localhost:8080 url，您将看到结果。

Jack Yu
2020-11-18

好吧，我搞明白了：当你编译 .pug 文件时，如果有一个数组，你必须使用 -O 选项来指定一些变量： pug -O '{"bookStore": "test"}' index.pug 可以工作，但是： pug index.pug 不起作用。

我觉得这有点奇怪。

Ralph
2020-11-18