Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics Using Templates with Express Using Logic in Pug

Mary Paul
Mary Paul
13,792 Points
Posted by Mary Paul
Mary Paul
13,792 Points

Cannot get colors array to render, "property length undefined".

I double checked that everything is passed to the template correctly but it's still not passing.

App.js:

const express = require("express");

const app = express();

const colors = [
'red',
'orange',
'yellow',
'green',
'blue',
'purple'
];

app.set('view engine', 'pug');

app.get('/', (req, res) => {
res.render('index');
});

app.get('/cards', (req,res) => {
res.render(
'card',
{
prompt: "Who is buried in Grant's tomb?",
colors
}
);
});

app.listen(3000, () => {
console.log('The application is running on localhost:3000');
});

Card.pug:

doctype html
html(lang="en")
head
title Flashcards
body
header
h1 Flashcards
section#content
ul
each color in colors
li= color
h2= prompt
if hint
p
i Hint: #{hint}
else
p No hint for you.
footer
p An app to help you study

index.pug:

doctype html
html(lang="en")
head
title Flashcards
body
header
h1 Flashcards
secion#content
h2 Welcome, student!
footer
p An app to help you study

5 Answers

Kevin Gates
Kevin Gates
15,053 Points
Kevin Gates
Kevin Gates
15,053 Points

Hi Mary Paul ,

I know this is delayed, but I wanted to follow-up. As some members mentioned, in the future if you can use the Markdown Cheatsheet it can teach you how to share your code in a readable format. Essentially you can use backticks (to the left of the number 1 on a QWERTY keyboard) to contain your code. So backtick backtick backtick js your code backtick backtick backtick Like this:

App.js:

const express = require("express");
const app = express();
const colors = [
   'red',
   'orange',
   'yellow',
   'green',
   'blue',
   'purple'
];

app.set('view engine', 'pug');

app.get('/', (req, res) => {
   res.render('index');
});

app.get('/cards', (req,res) => {
   res.render('card', { prompt: "Who is buried in Grant's tomb?", colors});
});

app.listen(3000, () => {
   console.log('The application is running on localhost:3000');
});

Card.pug:

doctype html
html(lang="en")
  head
    title Flashcards
  body
    header
      h1 Flashcards
    section#content
      ul
        each color in colors
            li= color
      h2= prompt
          if hint
            p
                i Hint: #{hint}
          else
            p No hint for you.
      footer
        p An app to help you study

Now if it's saying undefined, that's saying that no object is being passed to the card.pug file. Even though the syntax is ES6, perhaps the version of node you're running can't understand it. You can do this instead and it works:

app.get('/cards', (req, res) => {
    res.locals.prompt = "Who is buried in Grant's tomb?";
    res.locals.colors = colors;
    res.render('card', {});
});
Brian Anstett
Brian Anstett
5,831 Points
Brian Anstett
Brian Anstett
5,831 Points

Hey Mary Paul, the format of your code is a little hard to read but just from a quick glance, it looks like you forgot to assign the value to colors in your object that you pass res.render(). Remember JavaScript objects use a key=value system. Try passing something like this to your render method.

{
prompt: "Who is buried in Grant's tomb?",
colors: colors
}
Andy Hu
Andy Hu
7,473 Points
Andy Hu
Andy Hu
7,473 Points

No, both will actually work. I tested it. The former is a convenient way that was intruduced in ES6 actually.

Carlos Chavez
Carlos Chavez
5,691 Points

I thought the same. Actually, the {colors: colors} gave me a bit of a hell. It didn't work for me. Way the video shows it is correct.

Francisco Ortiz
Francisco Ortiz
2,673 Points
Francisco Ortiz
Francisco Ortiz
2,673 Points

This was where I was messing up at. Make sure to have the equal sign RIGHT next to the element.

li= color

Andy Hu
Andy Hu
7,473 Points
Andy Hu
Andy Hu
7,473 Points

  1. You should paste your code in good format, or nobody will be able to see it clearly.

  2. You need to post the whole error message as well.