Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does "res.render" do, and what does the html file look like?

What does res.render do, and what does the html file look like?

My end goal is to load arbitrary comma-separated-values from a text file into an html file (for example). I was only able to deduce that a view was the html file, and callback gives that html file back.

Here is the documentation: http://expressjs.com/api.html#res.render.

Now, given context from some example code I found, there is something about using ejs (embedded javascript) with <% and %>.

But if I may add, am I just incompetent or is the documentation really truly vague and assumes the reader knows everything? How could I have gone about figuring this out on my own? Is there any official documentation so I can gain a full understanding of usage, advantages and pitfalls?


Edit 1

I just want to add that I'm having a heck of a time learning node.js. Is it me or is the general documentation really vague? Aside from lousy explanations like above, there are no type specifications for parameters or return values.


Edit 2

Let me ask you some more specific questions above the code.

The actual orders.ejs file is in views/orders.ejs. How does this code refer to it?

HTML excerpt:

<tbody>   <% for(var i=0; i<orders.length; i++) {%>      <tr>        <td><%= orders[i].id %></td>        <td><%= orders[i].amount %></td>        <td><%= orders[i].time %></td>      </tr>      <% } %> 

And the js. Please see /orders:

  // Define routes for simple SSJS web app.  // Writes Coinbase orders to database. var async   = require('async')   , express = require('express')   , fs      = require('fs')   , http    = require('http')   , https   = require('https')   , db      = require('./models');  var app = express(); app.set('views', __dirname + '/views'); app.set('view engine', 'ejs'); app.set('port', process.env.PORT || 8080);  // Render homepage (note trailing slash): example.com/ app.get('/', function(request, response) {   var data = fs.readFileSync('index.html').toString();   response.send(data); });  // Render example.com/orders app.get('/orders', function(request, response) {   global.db.Order.findAll().success(function(orders) {     var orders_json = [];     orders.forEach(function(order) {       orders_json.push({id: order.coinbase_id, amount: order.amount, time: order.time});     });     // Uses views/orders.ejs     response.render("orders", {orders: orders_json});   }).error(function(err) {     console.log(err);     response.send("error retrieving orders");   }); });  // Hit this URL while on example.com/orders to refresh app.get('/refresh_orders', function(request, response) {   https.get("https://coinbase.com/api/v1/orders?api_key=" + process.env.COINBASE_API_KEY, function(res) {     var body = '';     res.on('data', function(chunk) {body += chunk;});     res.on('end', function() {       try {         var orders_json = JSON.parse(body);         if (orders_json.error) {           response.send(orders_json.error);           return;         }         // add each order asynchronously         async.forEach(orders_json.orders, addOrder, function(err) {           if (err) {             console.log(err);             response.send("error adding orders");           } else {             // orders added successfully             response.redirect("/orders");           }         });       } catch (error) {         console.log(error);         response.send("error parsing json");       }     });      res.on('error', function(e) {       console.log(e);       response.send("error syncing orders");     });   });  });  // sync the database and start the server db.sequelize.sync().complete(function(err) {   if (err) {     throw err;   } else {     http.createServer(app).listen(app.get('port'), function() {       console.log("Listening on " + app.get('port'));     });   } });  // add order to the database if it doesn't already exist var addOrder = function(order_obj, callback) {   var order = order_obj.order; // order json from coinbase   if (order.status != "completed") {     // only add completed orders     callback();   } else {     var Order = global.db.Order;     // find if order has already been added to our database     Order.find({where: {coinbase_id: order.id}}).success(function(order_instance) {       if (order_instance) {         // order already exists, do nothing         callback();       } else {         // build instance and save           var new_order_instance = Order.build({           coinbase_id: order.id,           amount: order.total_btc.cents / 100000000, // convert satoshis to BTC           time: order.created_at         });           new_order_instance.save().success(function() {           callback();         }).error(function(err) {           callback(err);         });       }     });   } }; 
like image 997
user2316667 Avatar asked Feb 18 '14 03:02

user2316667


People also ask

What does res render do?

The res. render() function is used to render a view and sends the rendered HTML string to the client.

How do I convert HTML to EJS?

Converting Static Pages to EJS FilesIn the root directory of your website, create a folder called views and inside that folder create two sub-folders called pages and partials. Move all your HTML files into the pages sub-folder and rename the . html file extensions to . ejs.

Is res render server side rendering?

res. render does serverside rendering (it fills a template with content).


2 Answers

What does res.render do and what does the html file look like?

res.render() function compiles your template (please don't use ejs), inserts locals there, and creates html output out of those two things.


Answering Edit 2 part.

// here you set that all templates are located in `/views` directory app.set('views', __dirname + '/views');  // here you set that you're using `ejs` template engine, and the // default extension is `ejs` app.set('view engine', 'ejs');  // here you render `orders` template response.render("orders", {orders: orders_json}); 

So, the template path is views/ (first part) + orders (second part) + .ejs (third part) === views/orders.ejs


Anyway, express.js documentation is good for what it does. It is API reference, not a "how to use node.js" book.

like image 137
alex Avatar answered Sep 25 '22 18:09

alex


Renders a view and sends the rendered HTML string to the client.

res.render('index'); 

Or

res.render('index', function(err, html) {   if(err) {...}   res.send(html); }); 

DOCS HERE: https://expressjs.com/en/api.html#res.render

like image 41
Sultan Aslam Avatar answered Sep 24 '22 18:09

Sultan Aslam