CODEWITHSUNDEEP
javascripthtmlexpressvariablesget
Mooni
Mooni

Reputation: 121

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

I am using [email protected]

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

Upvotes: 0

Views: 331

Answers (2)

YouneL
YouneL

Reputation: 8361

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>

Upvotes: 2

CodeAt30
CodeAt30

Reputation: 884

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>);

Upvotes: 0

Related Questions