เกิดข้อผิดพลาดในการเรนเดอร์รายการด้วย Pug และ ExpressJS

สวัสดี ฉันค่อนข้างใหม่กับ Node, express และ pug ฉันกำลังพยายามแสดงวัตถุในมุมมอง และฉันได้รับข้อผิดพลาด pug หรืออย่างน้อยฉันคิดว่ามันเป็นข้อผิดพลาดของ pug ฉันใช้ pugcli และเมื่อมันพยายามแสดง html ฉันพบข้อผิดพลาด

ข้อผิดพลาด pugcli ปรากฏบนเทอร์มินัลเป็น:

ไม่สามารถอ่านคุณสมบัติ 'ความยาว' ของไม่ได้กำหนดได้

สิ่งนี้แปลกเพราะเมื่อฉันพยายามดูในเบราว์เซอร์ แม้ว่า pug cli จะแสดงข้อผิดพลาด แต่เบราว์เซอร์แสดงรายการ แต่มีองค์ประกอบ <li> ทั้งหมดว่างเปล่า

ฉันต้องการให้ <li> แสดงรหัสวัตถุ ชื่อ และอายุ

ฉันเข้าใจว่าใน pug เพื่อเรนเดอร์วัตถุคุณต้องวนซ้ำโดยใช้ for loop บางอย่าง ฉันได้เขียนสิ่งนั้นในไฟล์ pug แต่วัตถุไม่แสดงผล

ฉันขอขอบคุณสำหรับความช่วยเหลือเกี่ยวกับสิ่งที่ฉันขาดหายไปในโค้ดหรือถ้าฉันทำให้โค้ดเสียหายโดยสิ้นเชิง

การตั้งค่าของฉันมีดังนี้

bin/www
public
   javascripts
   stylesheets
routes
   index.js
views
   index.pug
   layout.pug
   ...
app.js

index.pug ของฉันคือ:

extends layout
block content
  h1= title
  p Welcome to #{appHeading}
  div
    ul
      for user, i in users
        li= users.name +" - "+ users.id
      li=number

นี่คือ index.js ของฉันคือ:

var express = require('express');
var router = express.Router();
var users = [
  {
    id: 0,
    name: 'Glenn',
    age: 40
  },
  {
    id: 1,
    name: 'Jeff',
    age: 37
  },
  {
    id: 2,
    name: 'Sara',
    age: 22
  },
  {
    id: 3,
    name: 'Bill',
    age: 41
  },
  {
    id: 4,
    name: 'Mary',
    age: 29
  },

];
var appHeading = 'my object render app ' 
var number = 42;
/* GET home page. */
router.get('/', function(req, res, next) {

  //res.json(users);
  //res.send('Is this working?')
  res.render('index', { 
    title: 'This is my app to render objects in pug',
    users,
    number,
    appHeading
  });
});
module.exports = router;

และ app.js ของฉันคือ:

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const logger = require('morgan');
const bodyParser = require('body-parser');

const indexRouter = require('./routes/index.js');
const usersRouter = require('./routes/users.js');

const app = express();

/*const logging = function(req, res, next){
  console.log('Logging....')
  next();
}
*/
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.use(logger('dev'));
//Body Parser middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended : false}));
//app.use(express.json());
//app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
//app.use(logging);
app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


app.listen(port=3000 , function(){
  console.log('Server started on port '+ port);
})
module.exports = app;

person digitalguru    schedule 15.11.2018    source แหล่งที่มา
comment
ยินดีต้อนรับสู่ StackOverflow ฉันหวังว่าเราสามารถช่วยคุณค้นหาคำตอบที่คุณต้องการได้ สิ่งที่จะแสดงเมื่อคุณใส่ !{JSON.stringify(users)} ลงในเทมเพลตของคุณ   -  person Juan D. Gómez    schedule 15.11.2018
comment
@ JuanD.Gómez ขอบคุณสำหรับความช่วยเหลือของคุณ ฉันลองเล่น json.stringify แล้ว ฉันเพิ่ม !{JSON.stringify(users)} ลงในไฟล์ pug และเกิดข้อผิดพลาดในการเรนเดอร์หรือเพจ มันไม่ชอบโค้ดนั้นในไฟล์ pug ฉันลองในไฟล์ js แล้ว แต่ก็ไม่ได้ทำอะไรเลย ฉันเล่นกับ ti ต่อไป และมันเปลี่ยนวัตถุให้เป็นสตริง ฉันไม่สามารถโทรหาบางอย่างเช่น users.id และรับรหัสได้อีกต่อไป มันกลายเป็นสตริงที่สมบูรณ์ซึ่งฉันจะต้องแยกวิเคราะห์อย่างสมบูรณ์ นี่จะไม่ทำงาน ฉันขอขอบคุณความช่วยเหลืออื่น ๆ   -  person digitalguru    schedule 15.11.2018
comment
@Graham ขอบคุณสำหรับคำแนะนำของคุณ แต่ฉันลองขยายโค้ดตามที่คุณแนะนำ แต่ก็ไม่ได้ทำอะไรเลย ฉันยังเอาตัวแปรออกไปยกเว้นผู้ใช้และปัญหายังคงมีอยู่ ฉันพบว่าข้อผิดพลาด ไม่สามารถอ่านคุณสมบัติ 'ความยาว' ของไม่ได้กำหนด มาจากบรรทัดที่ 9 ใน index.pug บรรทัดคือ for user, i in users ฉันขอขอบคุณความช่วยเหลือใด ๆ   -  person digitalguru    schedule 15.11.2018
comment
ตัวแปรอื่นๆ ของคุณถูกส่งไปยังเทมเพลตหรือไม่ ฉันหมายถึง คุณสามารถเข้าถึงตัวแปรอื่นๆ ที่คุณส่งผ่านในเทมเพลตได้หรือไม่ จุดประสงค์ของการใช้ !{JSON.stringify(users)} คือการดีบั๊กและตรวจสอบว่าอาร์เรย์ผู้ใช้ถูกส่งผ่านอย่างถูกต้อง ดังนั้น คุณไม่จำเป็นต้องเก็บโค้ดนี้ไว้ในเทมเพลต เพียงตรวจสอบว่าค่าถูกต้องแล้วจึงลบออก   -  person Juan D. Gómez    schedule 15.11.2018
comment
ฉันกำลังลงคะแนนให้ปิดคำถามนี้เนื่องจากมีข้อผิดพลาดในการพิมพ์เล็กน้อย (users เทียบกับ user)   -  person Graham    schedule 15.11.2018
comment
@digitalguru โปรดพิจารณาลบคำถามนี้ ดูสิ่งนี้เพื่อเป็นข้อมูลอ้างอิง   -  person Graham    schedule 15.11.2018


คำตอบ (1)


ดูเหมือนว่ามันจะเป็นการพิมพ์ผิด:

extends layout
block content
  h1= title
  p Welcome to #{appHeading}
  div
    ul
      for user, i in users
        li= user.name +" - "+ user.id
      li=number

สิ่งนี้จะได้ผล สิ่งที่เกิดขึ้นคือคุณกำลังเข้าถึง users (อาร์เรย์) และไม่ใช่ user (วัตถุที่วนซ้ำ) ฉันได้ลองใช้โค้ดในเครื่องแล้วและใช้งานได้ดี

person Juan D. Gómez    schedule 15.11.2018
comment
ขอบคุณสำหรับคำตอบ ฉันค่อนข้างใหม่กับเรื่องนี้ และฉันสับสนว่าฉันต้องโทรไปรายการไหน ฉันเห็นมันชัดเจนขึ้นมากแล้ว!!!! ผมขอขอบคุณชุมชน ขอบคุณทุกท่าน - person digitalguru; 15.11.2018