CODEWITHSUNDEEP
javascripthtmlnode.jsexpressejs
Harsh kumar
Harsh kumar

Reputation: 87

Passing data from Node js to HTML using EJS

Here's my Server Side code:

app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
app.use(express.static('views'));
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

app.get('/',function(req,res){
    var title = "PERFORMANCE OVERVIEW";
    res.render('Main.html',{name:title});
})

Here's my Client Side code(Main.html):

<div class="row">
    <div class="sm-col-12">
    <h3 contenteditable="true" style="font-family:BentonSans Medium; text-align:center; color:rgb(0,38,99);"><%= name %></h3>                    
    <hr style="border-top: dotted 2px;color:grey" />
    </div>
</div>

The output I am getting on Main.html Page is "<%-name%>". Instead, it should print "PERFORMANCE OVERVIEW". What exactly wrong in this code?

Edit:

I forgot to mention that I have also tried other variants like <%= name%> and {{ name }}. But I am getting the output "<%= name%>" and "{{ name }}" respectively.

Upvotes: 4

Views: 9640

Answers (4)

Muhammad Shareyar
Muhammad Shareyar

Reputation: 822

const express = require('express');
const bodyParser = require('body-parser');

const port = 5000;

const app = express();

app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
app.use(express.static('views'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get('/', function (req, res) {
  var title = "PERFORMANCE OVERVIEW";
  res.render('Main.html', { name: title });
});

app.listen(port, console.log(`Server is running on port ${port}`))

Try this and it is rendering HTML page and also accessing the variable you pass in it.

Upvotes: 0

Lord Elrond
Lord Elrond

Reputation: 16032

changing it to <%= name %> should fix it.

If that doesn't you can try changing app.set('view engine', 'html') to app.set('view engine', 'ejs');, then deleting the following 2 lines.

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

app.get('/',function(req,res){
    var title = "PERFORMANCE OVERVIEW" ;
    res.render('Main',{name:title}) ;
});

I have always written it this way, so I can't say for sure if you syntax is correct, or if ejs will even work without setting it like this.

Update

Make sure the Main.html file is in a folder called views, and rename this file to Main.ejs.

next change res.render('Main.html',{name:title}); to res.render('main',{name:title});

Upvotes: 7

Shubham Dixit
Shubham Dixit

Reputation: 1

<%- Outputs the unescaped value into the template
<%= Outputs the value into the template (HTML escaped)

As you are looking to print the value instead use <%= tag so change <%- name%> to <%= name%>

The information can be found here-https://ejs.co/#docs

Upvotes: 2

saketh
saketh

Reputation: 813

Change <%- name%> to <%= name%> in your Main.html

Upvotes: 0

Related Questions