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

Mindaugas Dragunas
seal-mask
.a{fill-rule:evenodd;}techdegree
Mindaugas Dragunas
Full Stack JavaScript Techdegree Student 16,169 Points
Posted by Mindaugas Dragunas
.a{fill-rule:evenodd;}techdegree
Mindaugas Dragunas
Full Stack JavaScript Techdegree Student 16,169 Points

Cannot read property 'length' of undefined

Hi, i doing "Using Logic in Pug". I followed along with the video and checked another studens question wiht same issue, but none of answers solved my problem. I got error message: 

TypeError: C:\Users\mynde\Desktop\Coding\flashcards\views\card.pug:10
    8|     section#content

    9|       ul

  > 10|         each color in colors

    11|             li= color

    12|       h2= prompt

    13|           if hint


Cannot read property 'length' of undefined
    at eval (eval at wrap (C:\Users\mynde\Desktop\Coding\flashcards\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:27:32)
    at eval (eval at wrap (C:\Users\mynde\Desktop\Coding\flashcards\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:46:4)
    at template (eval at wrap (C:\Users\mynde\Desktop\Coding\flashcards\node_modules\pug-runtime\wrap.js:6:10), <anonymous>:76:164)
    at Object.exports.renderFile (C:\Users\mynde\Desktop\Coding\flashcards\node_modules\pug\lib\index.js:427:38)
    at Object.exports.renderFile (C:\Users\mynde\Desktop\Coding\flashcards\node_modules\pug\lib\index.js:417:21)
    at View.exports.__express [as engine] (C:\Users\mynde\Desktop\Coding\flashcards\node_modules\pug\lib\index.js:464:11)
    at View.render (C:\Users\mynde\Desktop\Coding\flashcards\node_modules\express\lib\view.js:135:8)
    at tryRender (C:\Users\mynde\Desktop\Coding\flashcards\node_modules\express\lib\application.js:640:10)
    at Function.render (C:\Users\mynde\Desktop\Coding\flashcards\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (C:\Users\mynde\Desktop\Coding\flashcards\node_modules\express\lib\response.js:1012:7)

My written code: 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

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

Formatted it looks ok:

app.get('/cards', (req, res) => {
  res.render('card', {
    prompt: 'who is buried in grants tomb?',
    colors,
    hint: 'whose tomb it is.'
  });
});


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

2 Answers

Liam Clarke
Liam Clarke
19,938 Points
Liam Clarke
Liam Clarke
19,938 Points

I am too sure then as i have tested your code and it works as intended, here is what i have done:

project structure

-/ views
    card.pug
    index.pug
index.js

views

index

html
  head
    title= title
  body
    h1= message

cards

html
  head
    title test
  body
    ul
        each color in colors
            li= color
    h2= prompt
        if hint
            p
                i Hint: #{hint}

Express

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


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

app.get('/', function (req, res) {
    res.render('index', { title: 'Hey', message: 'Hello there!' })
})

app.get('/cards', (req, res) => {
    res.render('card', {
        prompt: 'who is buried in grants tomb?',
        hint: 'whose tomb it is.',
        colors
    });
});


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

Hello

What is the "Formatted it looks ok:" part in your App.js, this is not a commented line so im assuming it is breaking everything below it

Mindaugas Dragunas
seal-mask
.a{fill-rule:evenodd;}techdegree
Mindaugas Dragunas
Full Stack JavaScript Techdegree Student 16,169 Points
Mindaugas Dragunas
.a{fill-rule:evenodd;}techdegree
Mindaugas Dragunas
Full Stack JavaScript Techdegree Student 16,169 Points

Oh, that was from student where I tryied to copy paste his code, but apart that the rest of the code was the same as mine. And if I will delete this ""Formatted it looks ok:" It won't work.

Update version. 

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 grants tomb?',
    hint: 'whose tomb it is.',
    colors
  });
});


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

extends layout.pug

block content
    section#content
      ul
        each color in colors
          li= color
      h2= prompt
          if hint
            p
              i Hint: #{hint}