Pug - Cannot read property of undefined

Question

I want to display all posts in my database via the getList function:

In my service layer I have the following function:

function getList() {
        const res = knex('posts').where({
            deleted: false,
        }).orderBy('createdAt')
        console.log("getList: " + res)
        return res
    }

Within the route file I am calling my getList function:

var express = require('express');
var router = express.Router();
const service = require('../services/post')

/* GET home page. */
router.get('/', function (req, res, next) {
  postList = service.getList().then(data => console.log(JSON.stringify(data)))
  console.log("Postlist: " + postList)

  res.render('index', {
    postList: postList
  });
});

module.exports = router;

Finally I would like to display the result in my index.pug file:

  table.table
    thead.thead-inverse
      tr
        th #
        th Title
        th Description  
        th Created At
        th Action
    tbody
      //TODO: If post is empty
      for post in postList
        tr
          td(scope='row')=post.id
          td=post.title
          td=post.description
          td=post.createdAt
          td
            a.btn.btn-primary(href='/edit', role='button') Edit

However, I get the following error:

C:\Users\user\Desktop\Coding Projects\learning_crud\views\index.pug:22 20| for post in postList 21| tr > 22| td(scope='row')=post.id 23| td=post.title 24| td=post.description 25| td=post.createdAt Cannot read property 'id' of undefined

TypeError: C:\Users\user\Desktop\Coding Projects\learning_crud\views\index.pug:22
    20|       for post in postList
    21|         tr
  > 22|           td(scope='row')=post.id
    23|           td=post.title
    24|           td=post.description
    25|           td=post.createdAt
Cannot read property 'id' of undefined
    at eval (eval at wrap (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:152:61)
    at eval (eval at wrap (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:173:4)
    at template (eval at wrap (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:225:119)
    at Object.exports.renderFile (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\pug\lib\index.js:428:38)
    at Object.exports.renderFile (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\pug\lib\index.js:418:21)
    at View.exports.__express [as engine] (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\pug\lib\index.js:465:11)
    at View.render (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\express\lib\view.js:127:8)
    at tryRender (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\express\lib\application.js:640:10)
    at Function.render (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\express\lib\response.js:971:7)
    at C:\Users\user\Desktop\Coding Projects\learning_crud\routes\index.js:10:7
    at Layer.handle [as handle_request] (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\user\Desktop\Coding Projects\learning_crud\node_modules\express\lib\router\index.js:281:22

Furthermore I get the following console output:

Listening on localhost:8080
getList: select * from "posts" where "deleted" = false order by "createdAt" asc
Postlist: [object Promise]
GET / 500 326.920 ms - 4255
[{"id":6,"title":"Excepturi rerum ratione omnis aut quo.","description":"Eum nostrum vel reiciendis qui. Nam sapiente unde deserunt totam at dolores. Tempor
e corrupti fugiat et consequuntur vero. Laboriosam autem mollitia odit cum repellat.","deleted":false,"createdAt":"2017-09-17T01:15:31.865Z","updatedAt":"20
17-09-16T22:02:41.233Z","deletedAt":"2017-09-17T00:02:15.235Z"}]
GET /css/bootstrap/bootstrap.min.css 304 3.464 ms - -
GET /css/style.css 304 0.913 ms - -
GET /js/bootstrap/bootstrap.min.js 304 1.173 ms - -

Is there a problem within my pug file? Any suggestions what I am doing wrong?

I appreciate your replies!

UPDATE

I changed my router to the following and it works:

router.get('/', function (req, res, next) {
  knex('posts').select().where({
    deleted: false,
  }).orderBy('createdAt').then(query => {
    res.render('index', {
      postList: query
    }); 
  })
});

Any suggestions why?

are you getting anything in console.log("Postlist: " + postList)? — Raghav Garg
– Raghav Garg, Commented Sep 17, 2017 at 11:59
try the keyword each instead of for like: each post in postList — Raghav Garg
– Raghav Garg, Commented Sep 17, 2017 at 12:05

Raghav Garg · Accepted Answer · 2017-09-17 12:52:04Z

1

In pug js, you do the loop using each. So you would have to do something like:

each post in postList

Update

Your previous code has one problem, you are making an async request so you need to write the code inside of then of the promise returning form the funciton getList. So need to change your code to:

service.getList().then(data => {
    console.log(JSON.stringify(data))
    res.render('index', {
        postList: data
    });
})

edited Sep 17, 2017 at 12:52

answered Sep 17, 2017 at 12:10

Raghav Garg

3,7072 gold badges26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Carol.Kar Over a year ago

Thx for your reply! I still get the error Cannot read property 'title' of undefined. It seems to me that I do not get the data correctly and push it into the frontend. Is there probably anything wrong with my router?

Carol.Kar Over a year ago

I changed my router and now it works. However, I am not sure why? Any suggestions? Please see my update.

Raghav Garg Over a year ago

@mrquad, please see the updated answer, and if the answer helped you then please consider accepting it.

Collectives™ on Stack Overflow

Pug - Cannot read property of undefined

1 Answer 1

Update

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related