Passing data from Node js to HTML using EJS

Question

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.

Should that not be <%= name %> ? At a glance it looks like a typo where - is there instead of =. - means unescaped ( I think ), but I doubt you meant that — Neil Lunn
– Neil Lunn, Commented Mar 3, 2019 at 6:24
I have tried that also, but still getting the <%= name%> as output. Not the "PERFORMANCE OVERVIEW" — Harsh kumar
– Harsh kumar, Commented Mar 3, 2019 at 11:22
Did you get it working? If my answer didn't help can you update your code to show all the code on your app.js page? — Lord Elrond
– Lord Elrond, Commented Mar 3, 2019 at 17:27

Lord Elrond · Accepted Answer · 2019-03-04 04:18:14Z

7

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

edited Mar 4, 2019 at 4:18

answered Mar 3, 2019 at 7:03

Lord Elrond

16.5k8 gold badges54 silver badges92 bronze badges

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

6 Comments

Harsh kumar Over a year ago

Hey @Jane ! I've also tried the above change that you have mentioned. But still I am getting the same output.

Lord Elrond Over a year ago

I figured out the problem (I think). See my update for the answer.

Lawrence Cherone Over a year ago

Can also use app.set('views', path.join(__dirname, 'path', 'to', 'views')); if you want custom views folder

Lord Elrond Over a year ago

@Lawrence Cherone I'm pretty sure ejs sets the views folder as the default place to look for templates because I've never used that.

Harsh kumar Over a year ago

@Jane, updated info worked ! But now I am facing another problem. I have another .html page. And on click of a button, it toggles between these two html pages using window.location.href. But now since I changed Main.html to Main.ejs, it is downloading .ejs file instead of displaying it. How to handle .ejs file through javascript ?

|

Shubham Dixit · Accepted Answer · 2019-03-03 07:16:18Z

2

<%- 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

answered Mar 3, 2019 at 7:16

Shubham Dixit

9,2685 gold badges32 silver badges50 bronze badges

1 Comment

Harsh kumar Over a year ago

I have tried that also, but still getting the <%= name%> as output. Not the "PERFORMANCE OVERVIEW".

saketh · Accepted Answer · 2019-03-03 07:06:36Z

0

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

answered Mar 3, 2019 at 7:06

saketh

8131 gold badge11 silver badges25 bronze badges

1 Comment

Harsh kumar Over a year ago

I have tried that also, but still getting the <%= name%> as output. Not the "PERFORMANCE OVERVIEW".

Muhammad Shareyar · Accepted Answer · 2019-03-04 05:30:08Z

0

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.

edited Mar 4, 2019 at 5:30

answered Mar 3, 2019 at 17:57

Muhammad Shareyar

8222 gold badges8 silver badges22 bronze badges

4 Comments

Harsh kumar Over a year ago

Hey @shareyar ! I've also tried the above changes that you have mentioned. But still I am getting the same output.

Muhammad Shareyar Over a year ago

Check my updated code version hope it will work for you.

Harsh kumar Over a year ago

Please could you let me what new you have added in this code ? I too have added the require statements and "listen" route handler in my code as well. My code is working if I convert Main.html to Main.ejs. But is there any way without changing it to .ejs file ?

Muhammad Shareyar Over a year ago

Here you dont need to change your file to EJS format you can access data in your html file

Collectives™ on Stack Overflow

Passing data from Node js to HTML using EJS

4 Answers 4

Update

6 Comments

1 Comment

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Update

6 Comments

1 Comment

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related