ExpressJS: call a variable from .js file to index.html

Question

I want to call a variable from main.js to index.html

main.js:

const express = require('express')
const app = express()
var router = express.Router()
app.use('/',express.static('public'));

app.get('/main', function(req, res) {
    res.send("index", {name:'hello'});
});

app.listen(3000, () => console.log('listening on 3000'));

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="icon" href="images/favicon.png">
</head>

<body>
  <<h1>{{ name }}</h1>
</body>
</html>

This is giving the following result on the webpage:

{{ name }}

Is there an http get method call that I need to make? What am I missing in between? Any help/hint/guidance would be highly appreciated!

Thanks

Possible duplicate of Passing a variable from node.js to html — AP.
– AP., Commented Feb 2, 2018 at 16:32
You are missing a plugin to perform template operations, you need to either write the code yourself or use a library like pug — Matthew Lagerwey
– Matthew Lagerwey, Commented Feb 3, 2018 at 2:51

YouneL · Accepted Answer · 2018-02-02 17:09:32Z

You have to use a template engine that let you replace variables in the view file with actual values, and transform the template into an HTML file sent to the client.

There are many view engines work in combination with express, you could choose one of them here: https://expressjs.com/en/guide/using-template-engines.html

I suggest you to use ejs since it's very easy to understand, Here is an example using it:

main.js

const express = require('express')
const app = express()
var router = express.Router()
app.use('/',express.static('public'));

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

app.get('/main', function(req, res) {
    res.send("index", {name:'hello'});
});

app.listen(3000, () => console.log('listening on 3000'));

index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="icon" href="images/favicon.png">
</head>

<body>
<!-- show name -->
<<h1><%= name %></h1>
</body>
</html>

CodeAt30 · Accepted Answer · 2018-02-02 16:39:00Z

0

You are using hbs syntax:

<<h1>{{ name }}</h1>

without ever loading the hbs view engine to render it.

example for hbs:

const express = require('express');
const hbs = require('hbs');

const app = express();

app.set('view engine', 'hbs');

app.get("/main", (req, res) => {
    res.render("index.hbs", {
        name: "hello"
    });
});

app.listen(<port>);

answered Feb 2, 2018 at 16:39

CodeAt30

8846 silver badges20 bronze badges

2 Comments

Mooni Over a year ago

This gives me the idea of view engine that I have been missing. However, the output I get from the run is: {{ name }}

CodeAt30 Over a year ago

as long as you are getting the output {{ name }} that simply means that nothing (i.e view engine) is actually picking up on it to replace it. Have you npm install hbs (or any other view-engine for that matter, i simply only am familiar with hbs personally but there a lot of others)? Have you initiated it properly? Is your file structure matching hbs requirements, have you configured the proper settings? Are you sending the app.get with the proper syntax and details?

Collectives™ on Stack Overflow

ExpressJS: call a variable from .js file to index.html

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related