Passing a variable from node js to html

Question

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

User · Answer

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

npm install --save pug - to add it to the project and package.json file
app.set('view engine', 'pug'); - register it as a view engine in express
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!

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

User · Answer

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

User · Answer

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      lt br gt     jqXHR status         jqXHR responseText          if  jqXHR status     401                msg      lt br gt 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

User · Answer

I figured it out I was able to pass a variable like this   lt script gt var name     lt    name   gt    lt  script gt  console log name

User · Answer

I found the possible way to write   Server Side -    app get   main   function req  res       var name    hello      res render   dirname     views layouts main html    name name           Client side  main html  -    lt h1 gt  lt    name   gt  lt  h1 gt

User · Answer

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  lt title gt   lt  php echo  custom title    gt   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

User · Answer

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

User · Answer

Other than those on the top  you can use JavaScript to fetch the details from the server   html file   lt  DOCTYPE html gt   lt html lang  en  dir  ltr  gt     lt head gt       lt meta charset  utf-8  gt       lt title gt  lt  title gt     lt  head gt     lt body gt         lt div id  test  gt         lt  div gt       lt script type  text javascript  gt          let url  http   localhost 8001 test           fetch url  then response   gt  response json             then   result    gt                console log  success    result              let div document getElementById  test                div innerHTML  title    result title  lt br  gt message    result message                        catch error   gt  console log  error    error         lt  script gt     lt  body gt   lt  html gt    server js  app get   test   req res   gt         res sendFile   dirname    views test html         res json  title  api  message  root         app get   render   req res   gt       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

User · Answer

If using Express it s not necessary to use a View Engine at all  use something like this    lt h1 gt    name     lt  h1 gt    This works if you previously set your application to use HTML instead of any View Engine

[javascript] Passing a variable from node.js to html

Examples related to javascript

Examples related to html

Examples related to node.js