Question

我正在尝试使用node和express以表格形式在pug视图引擎中打印json数据

我已经尝试过哈巴狗的每个循环

我的app.js文件看起来像

const express = require("express");
const path = require("path");
var pple = require('./product.json');
console.log(pple);
const app = express();
app.set("view engine", "pug");
app.set('views', path.join(__dirname, 'views'));
app.get("/", (req, res, next) => {
    res.render('product', { products: pple, title: "Product Details", message: "Products" });
});
app.listen(4000);
console.log("Listening Port : 4000");

我的product.pug文件看起来像

  head
    title= title
  body
    h1= message
    br
    table(style="width:50%",border="1")
        tr
            th  Id
            th  Name
            th  Quantity
        tr(each product in products)
            td= product.id
            td= product.name
            td= product.quantity

至少也是最后一次，我的product.json看起来像

{
 "products": [
        {
            "id": 99,
            "name": "Nokia 7",
            "quantity": 6
        },
        {
            "id": 100,
            "name": "Iphone X",
            "quantity": 5
        },
        {
            "id": 101,
            "name": "Samsung Galaxy",
            "quantity": 7
        },
        {
            "id": 102,
            "name": "Moto G5 S+",
            "quantity": 4
        }
    ]
}

我期望product.json文件中的数据应以表格格式打印，但出现错误-

TypeError: E:\StudyBits\FullStack\Express_assignment\assignment_preILP_002\views\product.pug:13
    11|             th  Quantity

    12|         tr(each product in products)

  > 13|             td= product.id

    14|             td= product.name

    15|             td= product.quantity

Cannot read property 'id' of undefined
    at eval (eval at wrap (E:\StudyBits\FullStack\Express_assignment\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:40:65)
    at template (eval at wrap (E:\StudyBits\FullStack\Express_assignment\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:48:201)
    at Object.exports.renderFile (E:\StudyBits\FullStack\Express_assignment\node_modules\pug\lib\index.js:427:38)
    at Object.exports.renderFile (E:\StudyBits\FullStack\Express_assignment\node_modules\pug\lib\index.js:417:21)
    at View.exports.__express [as engine] (E:\StudyBits\FullStack\Express_assignment\node_modules\pug\lib\index.js:464:11)
    at View.render (E:\StudyBits\FullStack\Express_assignment\node_modules\express\lib\view.js:135:8)
    at tryRender (E:\StudyBits\FullStack\Express_assignment\node_modules\express\lib\application.js:640:10)
    at Function.render (E:\StudyBits\FullStack\Express_assignment\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (E:\StudyBits\FullStack\Express_assignment\node_modules\express\lib\response.js:1008:7)
    at app.get (E:\StudyBits\FullStack\Express_assignment\assignment_preILP_002\app.js:9:9)

有人可以帮助我解决此错误。预先感谢

Answer 1

代替

app.get("/", (req, res, next) => {
    res.render('product', { products: pple, title: "Product Details", message: "Products" });
});

使用

app.get("/", (req, res, next) => {
    res.render('product', { products: pple.products, title: "Product Details", message: "Products" });
});

因为您是require("./product.json")，它本身是object而不是array。

否则，如果您不想将pple更改为pple.products，也可以将product.json更改为：

[
    {
        "id": 99,
        "name": "Nokia 7",
        "quantity": 6
    },
    {
        "id": 100,
        "name": "Iphone X",
        "quantity": 5
    },
    {
        "id": 101,
        "name": "Samsung Galaxy",
        "quantity": 7
    },
    {
        "id": 102,
        "name": "Moto G5 S+",
        "quantity": 4
    }
]

因此您得到了require("./product.json")返回的数组。

修改

以上仅解决了问题，即乘积不是数组。您还必须更改模板：

head
    title= title
    body
        h1= message
        br
        table(style="width:50%",border="1")
            tr
                th  Id
                th  Name
                th  Quantity
            each product in products
                tr
                    td= product.id
                    td= product.name
                    td= product.quantity

行each product in products必须是单独的，否则您将向标签（https://pugjs.org/language/attributes.html）添加属性

如何修复Pug中Json数组的迭代问题

1 个答案: