CODEWITHSUNDEEP
javascripthtmlnode.js
vic-3
vic-3

Reputation: 994

Passing a variable from node.js to html

I am trying to pass a variable from node.js to my HTML file.

app.get('/main', function(req, res) {
  var name = 'hello';
  res.render(__dirname + "/views/layouts/main.html", {name:name});
});

Upvotes: 38

Views: 199798

Answers (10)

Pritam Jana
Pritam Jana

Reputation: 296

I found the possible way to write.

Server Side -

app.engine('html', require('ejs').renderFile);

app.get('/main', function(req, res) {

  var name = 'hello';

  res.render(__dirname + "/views/layouts/main.html", {name:name});

});

Client side (main.html) -

<h1><%= name %></h1>

Upvotes: 18

Edgar Israel Cano
Edgar Israel Cano

Reputation: 1

I resolved this using cookies, it may help you if you don't want to pass any sensitive values to the client, and only using VanillaJS and Node.js with Express. I set the values as cookies using the cookie method of res object in my request function:

app.post('/app/login',(req, res) { // (POST, '/app/login')   
    const user = req.body.user;
    sessions.push({ sessionId, user});
    res.cookie('user', user);
    res.sendFile('inicio.html');
});

It's important to see that I sent an HTML file to the client, later, in the JavaScript file linked to this, I created this function:

document.addEventListener("DOMContentLoaded", ()=> {
    const username = document.cookie.slice(5);
    document.querySelector("#user_h3").innerHTML += username;
});

The selector "#user_h3", refers an h3 tag that can chage its content by the innerHTML property using QuerySelector. The HTML looks like this:

<h3 id="user_h3" >Welcome, user: </h3>

Upvotes: 0

Vasil Dininski
Vasil Dininski

Reputation: 2418

What you can utilize is some sort of templating engine like pug (formerly jade). To enable it you should do the following:

  1. npm install --save pug - to add it to the project and package.json file
  2. app.set('view engine', 'pug'); - register it as a view engine in express
  3. create a ./views folder and add a simple .pug file like so:
html
  head
    title= title
  body
    h1= message

note that the spacing is very important!

  1. create a route that returns the processed html:
app.get('/', function (req, res) {
  res.render('index', { title: 'Hey', message: 'Hello there!'});
});

This will render an index.html page with the variables passed in node.js changed to the values you have provided. This has been taken directly from the expressjs templating engine page: http://expressjs.com/en/guide/using-template-engines.html

For more info on pug you can also check: https://github.com/pugjs/pug

Upvotes: 16

Sainudheen Sahib
Sainudheen Sahib

Reputation: 21

I have achieved this by a http API node request which returns required object from node object for HTML page at client ,

for eg: API: localhost:3000/username

returns logged in user from cache by node App object .

node route file, 

app.get('/username', function(req, res) {
    res.json({ udata: req.session.user });
    });

Upvotes: 2

zaffar
zaffar

Reputation: 747

Other than those on the top, you can use JavaScript to fetch the details from the server. html file

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div id="test">
      </div>
    <script type="text/javascript">
        let url="http://localhost:8001/test";
        fetch(url).then(response => response.json())
        .then( (result) => {
            console.log('success:', result)
            let div=document.getElementById('test');
            div.innerHTML=`title: ${result.title}<br/>message: ${result.message}`;
        })
        .catch(error => console.log('error:', error));
    </script>
  </body>
</html>

server.js

app.get('/test',(req,res)=>{
    //res.sendFile(__dirname +"/views/test.html",);
    res.json({title:"api",message:"root"});
})

app.get('/render',(req,res)=>{
    res.sendFile(__dirname +"/views/test.html");
})

The best answer i found on the stack-overflow on the said subject, it's not my answer. Found it somewhere for nearly same question...source source of answer

Upvotes: 0

Codemaker2015
Codemaker2015

Reputation: 1

To pass variables from node.js to html by using the res.render() method.

Example:

var bodyParser = require('body-parser');
var express = require('express');
var app = express();

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

app.get('/', function(req, res){
    res.render('index.html',{email:data.email,password:data.password});
});

Upvotes: 11

Patrick Knott
Patrick Knott

Reputation: 1827

use res.json, ajax, and promises, with a nice twist of localStorage to use it anywhere, added with tokens for that rare arcade love. PS, you could use cookies, but cookies can bite on https.

webpage.js

function (idToken) {
    $.ajax({
        url: '/main',
        headers: {
            Authorization: 'Bearer ' + idToken
        },
        processData: false,
    }).done(function (data) {
        localStorage.setItem('name', data.name);
        //or whatever you want done.
    }).fail(function (jqXHR, textStatus) {
        var msg = 'Unable to fetch protected resource';
        msg += '<br>' + jqXHR.status + ' ' + jqXHR.responseText;
        if (jqXHR.status === 401) {
            msg += '<br>Your token may be expired'
        }
        displayError(msg);
    });

server.js, using express()

app.get('/main',
passport.authenticate('oauth2-jwt-bearer', { session: false }),
function (req, res) {
    getUserInfo(req) //get your information to use it.
        .then(function (userinfo) {  //return your promise
            res.json({ "name": userinfo.Name});
            //you can declare/return more vars in this res.json.
            //res.cookie('name', name); //https trouble
        })
    .error(function (e) {console.log("Error handler " + e)})
    .catch(function (e) {console.log("Catch handler " + e)});
});

Upvotes: 3

Bryam42
Bryam42

Reputation: 33

If using Express it's not necessary to use a View Engine at all, use something like this:

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

This works if you previously set your application to use HTML instead of any View Engine

Upvotes: 0

vic-3
vic-3

Reputation: 994

I figured it out I was able to pass a variable like this

<script>var name = "<%= name %>";</script>
console.log(name);

Upvotes: 35

Tudor Leustean
Tudor Leustean

Reputation: 567

With Node and HTML alone you won't be able to achieve what you intend to; it's not like using PHP, where you could do something like <title> <?php echo $custom_title; ?>, without any other stuff installed.

To do what you want using Node, you can either use something that's called a 'templating' engine (like Jade, check this out) or use some HTTP requests in Javascript to get your data from the server and use it to replace parts of the HTML with it.

Both require some extra work; it's not as plug'n'play as PHP when it comes to doing stuff like you want.

Upvotes: 5

Related Questions