Hello I am fairly new to Node, express, and pug I am trying to render an object to a view and I am receiving a pug error, Or at least I think it is a pug error. I am using the pugcli and when it tries to render the html I get an error.
The pugcli error is displayed on the terminal as:
Cannot read property 'length' of undefined
This is strange because when I try to view it in the browser even though the pug cli shows an error the browser shows a list but with all the <li> elements empty.
I want the <li> to display the objects id, name,and age
I understand that in pug in order to render an object you have to iterate through it with a for loop of some kind. I have written that in the pug file but the objects do not render.
I would appreciate help about what I am missing in the code or if I completely screwed up the code somehow?
My setup is at follows
bin/www public javascripts stylesheets routes index.js views index.pug layout.pug ... app.js
My index.pug is:
extends layout
block content
h1= title
p Welcome to #{appHeading}
div
ul
for user, i in users
li= users.name +" - "+ users.id
li=number
This is my index.js is:
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;
and My app.js is:
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;
!{JSON.stringify(users)}in your template?!{JSON.stringify(users)}to the pug file and it created an error in the rendor or the page. It did not like that code in the pug file. I tried it in the js file and it didn't do anything. I further played with ti and it turned the object to a string. I could no longer call something likeusers.idand get the id. It became a complete string which I would have to parse completely. this is not going to work. I would appreciate any other help.for user, i in users. I appreciate any help.!{JSON.stringify(users)}is to debug and check that the users array is getting passed correctly. So, you don't have to keep this code in the template just check that the values are right and then remove it.usersvs.user).