Node.js display variable as HTML

Question

I'm working on trying to display a Node.js variable as HTML.

I currently have this in my app.js which uses Express.

Package.json

  "dependencies": {
    "body-parser": "~1.12.0",
    "cookie-parser": "~1.3.4",
    "debug": "~2.1.1",
    "express": "~4.12.2",
    "ejs": "~2.1.3",
    "hbs": "~2.9.0",
    "morgan": "~1.5.1",
    "serve-favicon": "~2.2.0"
  }

App.js

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);

app.post('/calc', function(req, res) {
  res.render('calc', {
  title: 'Calc'});
  var v3 = (req.body.value1 * req.body.value2);
  console.log(v3);
});

Within handlebars, I'm just simply seeing if I can see the value rendered, but I'm not able to.

calc.hbs <h2><%= v3 %></h2> and {{v3}} displays nothing.

What am I missing?

WORKING SNIPPET

app.post('/calc', function(req, res) {
  var v3 = (req.body.value1 * req.body.value2);
  res.render('calc', {
  title: 'Calc',
  v3: v3});  //Pass the local variables into objects to render
  console.log(v3);
});

That doesn't look like handlebars, it appears to be EJS. Handlebars uses mustache templating like {{v3}} — James Parsons
– James Parsons, Commented Apr 8, 2015 at 2:55
I updated my question. I tried that earlier and it didn't render anything. Thanks for catching that. — Sethe23
– Sethe23, Commented Apr 8, 2015 at 2:58
Are all your template dependencies handled? Also, it may not be your issue,but handlebar's CI is failing currently npmjs.com/package/handlebars — James Parsons
– James Parsons, Commented Apr 8, 2015 at 3:03
I'm currently developing in Webstorm 10 and NPM is not failing. — Sethe23
– Sethe23, Commented Apr 8, 2015 at 3:08

Interrobang · Accepted Answer · 2015-04-08 03:09:25Z

1

You have a significant number of problems and really need to go read the Express docs. It's not possible to fully deduce your problem without more code (specifically, how you're setting up your view engine), but we can at least identify the problems in the code you posted.

First off, and most importantly, res.render's second argument is a "locals" object, which defines the variables that you can use in your template. You're not passing the v3 variable into that object, so your template cannot output it.

Secondly, you've set up a POST route. If you're just visiting /calc in your browser, this route will never execute because visiting a page is a GET request. It does look like you intend to POST since you're using req.body, but it's worth mentioning in case you copied this code from somewhere else.

Third, you've passed a template name to res.render that has no extension. That means that you must specify a default view engine for Express to use to load this template. You haven't showed this part of your code, so instead, look at the documentation to set view engine. By default, Express looks in a directory called views for the template, so make sure your template is at /views/calc.hbs and your view engine is set up to be Handlebars (requires setting view engine and calling app.engine to register Handlebars).

Fourth, you're trying to console.log the v3 variable, which doesn't write to the res object, which is the response that will be sent to the browser.

Solving these issues should get you on your way.

answered Apr 8, 2015 at 3:09

Interrobang

17.5k3 gold badges57 silver badges63 bronze badges

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

3 Comments

Sethe23 Over a year ago

Thanks for the input. I am purposely using POST because I'm calculating two variables on the index route. I've added additional app.js. If you want to view it again.

Interrobang Over a year ago

From the code you added, it looks like items 2 and 3 above are OK. So if you pass the v3 variable as part of the locals object, you should see some output from {{v3}}.

Sethe23 Over a year ago

I did that and that works. Take a look at my edit, and again, thanks for the help.

Collectives™ on Stack Overflow

Node.js display variable as HTML

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related