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 Serving Static Files in Express Merging the Design Files

Geoff Millar
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Geoff Millar
Full Stack JavaScript Techdegree Graduate 16,274 Points
Posted by Geoff Millar
.a{fill-rule:evenodd;}techdegree seal-36
Geoff Millar
Full Stack JavaScript Techdegree Graduate 16,274 Points

Side is coming out as undefined through template but working in query

My card.pug is looking like this:

extends app 
block card
    section(class=`flashcards`)
        .card(class= `card-${side}`)
            .card-header
            h1.card-title= side
            #content 
                h2= text
                if hint 
                    p.hint
                        i= hint 
            .card-flip-wrap
                a(href=`${id}?side=${sideToShow}`)
                    img.card-flip(src='/static/img/flip.svg')
            .card-next
                a(href='/cards')
                    img(src='/static/img/next.svg')
        script(src='/static/js/app.js')

and my cards.js section is looking like this:

router.get('/:id', (req, res) => {
    const { side } = req.query;
    const { id } = req.params;
    if( !side  ){
        return res.redirect(`/cards/${id}?side=question`);
    }
    const name = req.cookies.username;
    const text = cards[id][side];
    const {hint} = cards[id];
    const templateData = { id, text, name};
    if ( side === 'question' ) {
        templateData.hint = hint;
        templateData.sideToShow = 'answer';
        templateData.sideToShowDisplay = 'Answer';
    } else if ( side === 'answer' ) {
        templateData.sideToShow = 'question';
        templateData.sideToShowDisplay = 'Question';
    };

    res.render('card', templateData);
});

Through testing the template is showing in the h1.card-title= undefined and .card(class= undefined). BUT my query string was all working so that means side was declared properly but i'm not sure why the template isn't working. I tried just typing in question or answer and it seemed to work and pull the right imagery but i can't get side as a variable to work there.

1 Answer

Travis Alstrand
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Travis Alstrand
Treehouse Teacher
Travis Alstrand
.a{fill-rule:evenodd;}techdegree
Travis Alstrand
Treehouse Teacher

Hey Geoff! I would try including side within your const templateData declaration. If that doesn't fix the issue, let me know!