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

Question

我正在尝试使用 node 和 express

以表格形式在哈巴狗视图引擎中打印 json 数据

我已经尝试了 pug 中的每个循环

我的 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").

返回的数组

编辑

以上只解决了products不是数组的问题。您也必须更改模板：

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 数组的迭代问题

How to fix the Iteration problem for Json array in Pug

node.js

express

pug