Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript Express Basics Serving Static Files in Express Merging the Design Files

Geoff Millar
seal-mask
.a{fill-rule:evenodd;}techdegree
Geoff Millar
Full Stack JavaScript Techdegree Student 13,008 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 Staff

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