if statement: Cannot get partial to render

Question

I am writing an application that displays a different image in the browser based on user data. The back end works fine: I'm getting the proper user data to store in the cookie. Here is what the hbs view looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Project</title>
    <base href="/">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="./public/css/styles.css" type="text/css">
</head>
<body>
    {{{body}}}
    <div class="container">
        <h1>{{title}}</h1>
        <div class="row">
            <div class="buttons col-xs-12">
                {{#each users}}
                <button class="btn btn-primary" id={{this.User_ID}} data-toggle="modal" data-target=".modal" onclick="setUserCookie(event)">
                    User ID: {{this.User_ID}} <br>
                    Geo: {{this.Geo}} <br>
                    Industry: {{this.Industry}} <br>
                    Company Size: {{this.Company_Size}} <br>
                </button>
                {{/each}}
            </div>
        </div>
        {{>picture_view}}
    </div>
</body>
<script src="src/js/controller.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
</html>

And this is what the partial picture_view looks like:

{{#newLogin}}
<div class="row">
    <img src="../src/images/Austin.jpg" alt="">
</div>
{{/}}

and my app.js route for the URL looks like this:

app.get('/users/:id', (req, res)=>{
    let data = req
    User.findOne({User_ID: req.params.id}).then((user)=>{
        res.render('partials/picture_view', {user:user, helpers:{
                    newLogin: function(){
                        console.log('newLogin runnning')
                        let user = data.cookies.user;
                        if(user){
                            return true;
                        } else {
                            return false
                        }
                    }
                }})
        });
})

Here is the route for the root page:

app.get('/', (req, res) => {
    let data = req;
        User.find({}).exec(function(err, users){
            res.render(__dirname + '/public/views/', {title: "Users", users:users, helpers:{
                    newLogin: function(){
                        console.log('newLogin runnning')
                        let user = data.cookies.user;
                        if(user){
                            return true;
                        } else {
                            return false
                        }
                    }
                }
            });
        })
    }
)

I cannot get the partial to render like this. If I navigate to the /users/:id page in the browser, the newLogin function returns the 'true' value to the page, but doesn't render the image. I have tried moving the template logic to the front page and it does the same thing. I'm at a loss.

if statement: Cannot get partial to render

0 Answers0