Node app connecting to pugjs - node.js

Question

I'm relatively new to using Node.js. I've successfully created an app that takes user data (specifically the date in which the user was created) and spits out the amount of daily, weekly, monthly and yearly users. This was successfully tested via Postman.
I've successfully installed pugjs and am trying to transfer the calculated data in to the pug file. I have a controller, model and route file all represented below:
userAPIController.js
'use strict';
const mongoose = require('mongoose'),
express = require('express'),
app = express(),
moment = require('moment'),
pug = require('pug'),
User = mongoose.model('Users'),
compiledFunction = pug.compile('results.pug');
exports.list_all_users = function(req, res) {
User.find({}, function(err, user) {
if (err)
res.send(err);
res.json(user);
});
};
exports.create_a_user = function(req, res) {
var new_task = new User(req.body);
new_task.save(function(err, user) {
if (err)
res.send(err);
res.json(user);
});
};
exports.calculate = function(req, res) {
User.find({}, function(err, userArray) { //the second parameter, userArray, is an array that is returned to you.
if (err)
res.send(err);
var daily_count = 0;
var weekly_count = 0;
var monthly_count = 0;
var yearly_count = 0;
var total_count = 0;
for (var i = 0; i < userArray.length; i++) {
total_count++;
var timeString = userArray[i].Created_date;
var dayString = timeString.getUTCDate();
var monthString = timeString.getUTCMonth()+1;
var yearString = timeString.getUTCFullYear();
var todaysDate = new Date();
var todaysDay = todaysDate.getUTCDate();
var todaysMonth = todaysDate.getUTCMonth()+1;
var todaysYear = todaysDate.getUTCFullYear();
// Calculating Daily Users
if (dayString === todaysDay && monthString === todaysMonth && yearString === todaysYear) {
daily_count += 1;
}
// Calculating Weekly Users
var weekDifference = todaysDay - dayString;
if (monthString === todaysMonth && yearString === todaysYear && (weekDifference >= 0 && weekDifference <= 7)) {
weekly_count += 1;
}
// Calculating Monthly Users
if (monthString === todaysMonth && yearString === todaysYear) {
monthly_count += 1;
}
// Calculating Yearly Users
if (yearString === todaysYear) {
yearly_count += 1;
}
}
res.json({
"daily_count":daily_count,
"weekly_count":weekly_count,
"monthly_count":monthly_count,
"yearly_count":yearly_count,
"total_count":total_count
});
});
};
exports.delete_a_user = function(req, res) {
User.remove({
_id: req.params.userId
}, function(err, user) {
if (err)
res.send(err);
res.json({ message: 'User successfully deleted' });
});
};
With a userAPIModel.js, userAPIRoutes.js and server.js file as well, all modeled after this tutorial: https://www.codementor.io/olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd
I also have a views folder with the pug file inside, and am unsure how to take my daily, weekly, monthly and yearly users (as seen in the controller) and transfer them in to the pug. I understand the #{} pug syntax; however I am not sure about how to get the information over. I've tried going in to the controller file where the data is located and using a res.send function such as:
app.get('/', function (req, res) {
res.send(compiledFunction({
dCount: daily_count,
wCount: weekly_count,
mCount: monthly_count,
yCount: yearly_count,
tCount: total_count
}));
})
And then importing it to pug from there. The only concern is, I don't believe this is the correct way to link the controller to the pug file or that I'm using the right function.
What exactly am I doing wrong? I figure I'd put the above in the controller because that's where the JSON is being outputted, but I'm used to putting it in the server file.

Answer 1

I love pug. You probably will, too.
Step 1) At some point after you require pug, and before you start routing, set pug as the view engine.
var app = express();
app.set('view engine', 'pug');
Step 2) Make a views folder in your project root and write a pug template in there. I.E. /project_root/views/home.pug
Step 3) route a request to your template. This is done by using the express method "render". You can attach variables or function results to the data object. In my example, I'm literally calling it "data" but you can reference it however you want so long as it's a javascript object. The key names are important as they're used to reference your data in the pug template.
app.route('/', function(req, res){
res.render('home.pug', {data: someVar});
});
Step 4) Reference your data in your template. Pug allows you to not just reference, but you can iterate over it or perform JavaScript on it. A simple example of what "home.pug" might look like is this:
doctype
html
head
title Test Template
body
// Here it's interpolated in a string
h1 Take a look at my #{data}
// Here the inner html is being set as your variable
h2= data
// Here's an example of your data being set to a tag attribute value using ES6 template strings
a(href=`${data}`) Click Here
Add this to your bookmarks for future reference:
https://expressjs.com/en/guide/using-template-engines.html
Be sure to read up more on pug here:
https://pugjs.org/api/getting-started.html