Passing an array to a EJS view, using Bookshelf.JS - node.js

Question

My logic:
/* GET /events/list */
router.get('/events/list', function(req, res) {
new db.Tag({})
.fetchAll()
.then(function(tags) {
res.locals.title = "List of events";
res.locals.tags = tags;
res.render('events/list.ejs');
});
});
My view:
<% for (var tag in tags) { %>
<div class="checkbox">
<label>
<input type="checkbox" data-tag-id="<%= tag.tagId %>" />
<%= tag.name %>
</label>
</div>
<% } %>
What I'm getting:
[x] undefined
[x] undefined
[x] undefined
[x] undefined
What I should be getting:
[x] foo
[x] bar
[x] zort
[x] troz
I also tried passing
res.locals.tags = tags.toJSON();
and also
res.locals.tags = JSON.stringify(tags);
So.. how do I finally pass my collection to an EJS view?
I also logged (console.log(tags)) just after then(function(tags) and I'm getting the models (tags in this case) correctly.
I also tried tags.forEach in my EJS view but a native javascript array like this: [{tagId:1, name:"blah"}, {tagId:2, name"Foo"}] doesn't have "forEach" method implemented

Answer 1

In your template, use forEach (if available) or loop using the index instead.
server.js
res.locals.tags = tags.toJSON();
view.html (with [].forEach)
<% tags.forEach(function(tag) { %>
<div class="checkbox">
<label>
<input type="checkbox" data-tag-id="<%= tag.tagId %>" />
<%= tag.name %>
</label>
</div>
<% }) %>
view.html (with indices)
<% for (var i in tags) { %>
<div class="checkbox">
<label>
<input type="checkbox" data-tag-id="<%= tags[i].tagId %>" />
<%= tags[i].name %>
</label>
</div>
<% } %>

Answer 2

Here's an alternative to using Array.prototype.forEach. You give the Bookshelf collection to the view. Bookshelf.Collection has its own .forEach:
server.js
res.locals.tags = tags; // NOT .toJSON()
view.html
<% tags.forEach(function(tag) { %>
<div class="checkbox">
<label>
<input type="checkbox" data-tag-id="<%= tag.id %>" />
<%= tag.get('name') %>
</label>
</div>
<% }) %>