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

Kajetan Mazur
Kajetan Mazur
2,467 Points

Cannot pass array of colors

Hi

I cannot pass array of colors. It says Cannot read property 'length' of undefined. So instead of each color in colors i made each color in ['red','orange','yellow','green','blue','purple'] and it worked,but i would like to pass it as variable. I've got in 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('Aplikacja działa na localhost:3000'); });

it does not work even if i change to : app.get('/cards', (req,res) => { res.render('card', {prompt: "Who is buried in Grant's tomb?", colors: colors}); });

Can you post the contents of your card.pug file, or your cards.pug file? Your issue might be due to how you're handling colors in your templating code, or it could just be that cards/card routing typo.

The syntax here seems incorrect:

colors}); });

You have an extraneous "});"

Tom Geraghty
Tom Geraghty
24,174 Points

Formatted it looks ok:

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

See this for more: https://www.codecademy.com/blog/78 Although you don't really need semicolons in JS, that line does look weird, Reid Young

2 Answers

Render doesn't preserve objects, so you'll have to perform some logic on the backend to figure out which colors you want to send, or send them all manually.

Charles Sharpe
Charles Sharpe
2,013 Points

I am having the same problem.

TypeError: ...\Learn Javascript\Flashcards\views\card.pug:11 9| section#content 10| ul

11| each color in colors 12| li= color 13| h2= prompt 14| if hint

Cannot read property 'length' of undefined at eval (eval at wrap (...\Learn Javascript\Flashcards\node_modules\pug\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:29:31) at eval (eval at wrap (...\Learn Javascript\Flashcards\node_modules\pug\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:48:4) at template (eval at wrap (...\Learn Javascript\Flashcards\node_modules\pug\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:74:139) at Object.exports.renderFile ...\Learn Javascript\Flashcards\node_modules\pug\lib\index.js:428:38) at Object.exports.renderFile (...\Learn Javascript\Flashcards\node_modules\pug\lib\index.js:418:21) at View.exports.__express [as engine] (...\Learn Javascript\Flashcards\node_modules\pug\lib\index.js:465:11) at View.render ...\Learn Javascript\Flashcards\node_modules\express\lib\view.js:128:8) at tryRender (...\Learn Javascript\Flashcards\node_modules\express\lib\application.js:640:10) at Function.render (...\Learn Javascript\Flashcards\node_modules\express\lib\application.js:592:3)

at ServerResponse.render (...\Learn Javascript\Flashcards\node_modules\express\lib\response.js:966:7)

[card.pug]

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('/about', (req, res) => { res.render('about');
});

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

app.listen(3000, () => { console.log('App is running on port 3000!') });

Charles Sharpe
Charles Sharpe
2,013 Points

I forgot to pass the var to the /cards route.

colors}); });

has extraneous "});" in it