Currently, I am building a website using Handlebar, Express, and Mysql2 npm modules. In this project, I needed to load data from my database and display it in a select element in my view.
I had a hard time finding a tutorial that explained how to do this in a proper way so following various tutorials i managed to hack something together that works. And I'm almost certain that it's the right way to do it.
So let's begin, I assume that you have knowledge of Node Js and npm and how to create a new Express project.
I have a categories model that can do basic CRUD operations on my categories table in the database.
//models/categories.js var mysql = require('mysql2') var db = require('./db') exports.getAllCategories = function() { return new Promise(function(resolve, reject) { var connection = db.getConnection() connection.query('SELECT * FROM category', function(err, results, fields) { if (err) { return reject(err) } resolve(results) }) connection.end() }) }
Then i have a controller (which resides in routes because Express thinks thats a good name).
//routes/categoryRoute var express = require('express') var router = express.Router() var categories = require('../models/categories') router.get('/category', function(req, res, next) { categories.getAllCategories().then(function(result) { res.render('category', {arr: result}) }).catch((err) => setImmediate(() => { throw err })) })
And lastly i have my view where i want to display the data.
<div class="form-group"> <label for="category" class="col-md-3 control-label">Category</label> <div class="col-md-9"> <select class="form-control" name="category" id="kategori"> {{#each arr}} <option value="{{this.Id}}">{{this.Name}}</option> {{/each}} </select> </div> </div>
In order to iterate through the data in the view that we got from our controller, we have to give our result array a name.
In this example i just named it arr and then we can iterate through it using handlebars {{#each}} helper.
This is quick and dirty and i hoped it helped you achive the result you hoped for.