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?

Answer 1

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

each post in postList

Read more about Pug each

or you can use for loop like:

- for (post in postList) {
    // pug code in between
- }

Reference: https://pugjs.org/language/code.html#unbuffered-code

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
    });
})