Issue Dynamically Populating Dropdown Using Node and Handlebars

Question

I am attempting to dynamically populate the dropdown on my template. I am adding company IDs to an array and then attempting to pass the array to the template.

Adding the IDs to the array:

var express = require('express');
//var mysql = require('./dbcon.js');


var mysql = require('mysql');
var pool = mysql.createPool({
  connectionLimit : 10,
  host  : 'localhost',
  user  : 'root',
  password: 'Baseball247!',
  database: 'award'
});


var app = express();
var handlebars = require('express-handlebars').create({defaultLayout:'main'});

app.engine('handlebars', handlebars.engine);
app.set('view engine', 'handlebars');
app.set('port', 3000);
app.use(express.static('public'));
app.get('/add-user', function(req,res){
  var context = {};
  pool.query("SELECT id from company;", function(err,rows,fields){
    if (err){
      console.log(err);
      next(err);
      return;
    }
    context.results = rows;
    var companies = [];
    //console.log('The solution is: ', rows.length);
    for (var i =0; i < rows.length; i++) {
      //console.log('The solution is: ', rows[i]["id"]);
      companies.push(rows[i]["id"]);
    }
    console.log(companies);
    res.render('addUser', {companies : companies});
  });
});

Then, I try to display those values in the dropdown via:

<select>
    <% for(var i=0; i < companies.length; i++) { %>
        <option><%= companies[i] %></option>
    <% } %>
</select>

However, when I look at the web page the dropdown shows this instead of the company IDs:

When I console.log the array I see the correct results so I assume the issue is either with how I am passing the array or how I am traversing/calling the array in the template. Does anyone know what I am missing here?

Where is the code that actually fills the template using the handlebars library? Is it on the server or client and can you show that code please. — Jason Livesay
– Jason Livesay, Commented Apr 28, 2018 at 23:37
@JasonLivesay Maybe I'm confused. My code that I thought was populating my template using handlebars was the first block of code that is running on the server. The first block of code is from my server side code. — Eric Walters
– Eric Walters, Commented Apr 28, 2018 at 23:59
I dont see any code that references handlebars, where is that — Jason Livesay
– Jason Livesay, Commented Apr 29, 2018 at 0:19
@JasonLivesay I added it to the server side code above. Apologies if this is not what you are referencing. — Eric Walters
– Eric Walters, Commented Apr 29, 2018 at 0:47

Eric Walters · Accepted Answer · 2018-04-29 20:47:46Z

1

The syntax for the select should be:

    <p>Company: <select name="company" id="company">
    {{#each companies}}
        <option>{{this}}</option>
    {{/each}}
    </select>

answered Apr 29, 2018 at 20:47

Eric Walters

3111 gold badge10 silver badges26 bronze badges

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

Comments

Jason Livesay · Accepted Answer · 2018-04-29 00:52:39Z

0

Handlebars uses curly braces not greater than percent. Can you please check the basic documentation? Thank you.

answered Apr 29, 2018 at 0:52

Jason Livesay

6,3783 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

Issue Dynamically Populating Dropdown Using Node and Handlebars

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related