Как исправить проблему итерации для массива Json в Pug - PullRequest
Новая
       32

Как исправить проблему итерации для массива Json в Pug

1 голос
/ 10 апреля 2019

Я пытаюсь распечатать данные 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)

Может кто-нибудь помочь мне с этой ошибкой. заранее спасибо

1 Ответ

0 голосов
/ 10 апреля 2019

вместо 

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)

...