handlebars js not rendering array

Question

I've been working for a while to try and render an array from an express app that I have running but I get no errors but nothing displayed.

Here is my handlebars template:

<h3>Registered Users:</h3>
<h5>{{users}}</h5>
<ul class="list-group">
    {{#each users}}
    <li class="list-group-item">
        {{this.fields.username}}
    </li>

    {{/each}}
</ul>

Here is my express code that returns users.

/* GET users listing. */
router.get('/', function(req, res, next) {
  api.getUsers(function(response, body){
    console.log(body);
    res.render('users/list', { 'users': body });
  });
});

At first I thought the users array wasn't getting passed through from express correctly, but in the template you can see that I just displayed users, and the object displayed was what I thought it would be.

But the list of users is not getting rendered, even though there's at least one element in the array. Any ideas? I'm sure it's something small I'm missing..

Not sure if it makes a difference, but I don't think you need the this in this.fields.username. — Joe Attardi
– Joe Attardi, Commented Dec 10, 2015 at 16:45

AfDev · Accepted Answer · 2015-12-10 22:45:51Z

3

I would have to agree with @Joe Attardi, your template should look more like this:

<h3>Registered Users:</h3>
<h5>{{users}}</h5>
<ul class="list-group">
    {{#each users as |user|}} <!-- get each user as user from users -->
    <li class="list-group-item">
        {{user.username}}
    </li>
    {{/each}}
</ul>

answered Dec 10, 2015 at 22:45

AfDev

1,24219 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

phouse512 Over a year ago

thanks! I tried this, but even when I just did {{user}} inside the block to see if anything would show up, nothing did. Is it possible the object I have is not being interpreted as an array or something?

AfDev Over a year ago

If that's not working the, my best guess is that your api.getUsers function is not returning your data. process of elimination. first remove the call to api.getUsers(), just create a users stub object, render it and see if handlebars shows anything. var testUsers = [{username:'jsmith'}, {username:'janesmith'}] router.get('/', function(req, res, next) { res.render('users/list', { users: testUsers });

Collectives™ on Stack Overflow

handlebars js not rendering array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related