Node.JS Express Promise Issue

Question

I am working on a Node.JS/Express application. I am using Jade as the template engine. I am experiencing some strange behavior.

I have a mock API that returns a simply array to my Jade template. I have verified the API works from a server perspective. However, whenever I start the server the first time I go to that specific page I receive an error

TypeError: Cannot read property 'length' of undefined
    at routes.js:28:34
    at Layer.handle [as handle_request] (E:\dev\code\javascript\ps_resume_express\node_modules\express\lib\router\layer.js:95:5)
    at next (E:\dev\code\javascript\ps_resume_express\node_modules\express\lib\router\route.js:131:13)
    at Route.dispatch (E:\dev\code\javascript\ps_resume_express\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (E:\dev\code\javascript\ps_resume_express\node_modules\express\lib\router\layer.js:95:5)
    at E:\dev\code\javascript\ps_resume_express\node_modules\express\lib\router\index.js:277:22
    at Function.process_params (E:\dev\code\javascript\ps_resume_express\node_modules\express\lib\router\index.js:330:12)
    at next (E:\dev\code\javascript\ps_resume_express\node_modules\express\lib\router\index.js:271:10)
    at Function.handle (E:\dev\code\javascript\ps_resume_express\node_modules\express\lib\router\index.js:176:3)
    at router (E:\dev\code\javascript\ps_resume_express\node_modules\express\lib\router\index.js:46:12)

This happens every time I start the start the server. However, as long as it stays running, subsequent calls work and the page is properly rendered.

Here is my route method is

router.get('/skills', (req, res) => {
      console.log('received request for skills');
      resumeAPI.getAllSkills().then((skills) => {
        console.log("inside then skills length " + skills.length);
        properties.skills = skills;
        console.log("inside then properties.skills length " + properties.skills.length);
      });
      console.log("outside promise skills length " + properties.skills.length);
      properties.heading = 'Skills';
      res.render('skills', properties)
    });

I put in the console.log lines to try and capture what is going on.

My API method is as follows

class ResumeApi {
  static getAllSkills() {
    return new Promise((resolve, reject) => {
      console.log("from api skills " + skills.length);
      resolve(skills);
    });
  }
}

What might I be doing wrong?

Answer 1

Your console.log("outside promise skills length " + properties.skills.length) will run before the asynchronous operation finishes it's execution, so do not expect it to be something different than undefined. You can't access the skills property outside the promise in such a case.

You need to put the res.render inside .then() method of getAllSkills() execution

router.get('/skills', (req, res) => {
  resumeAPI.getAllSkills().then((skills) => {
    properties.skills = skills;

    // res.render goes HERE, otherwise it will not have the skills property inside properties object
    properties.heading = 'Skills';
    res.render('skills', properties)
  });
});