Node.js Jade: Add rows to tables - node.js

Question

I am using Node.js with the Jade template engine to create a test web page, to confirm that some features will work in the real project.
Depending on the first digit of the client's IP address, I want to render a Jade page with a table on it. The number of rows in the table is equal to that first digit from earlier. For example, if the client's address is 192.198.94.227, the table will have 1 row. If it is 92.61.131.242, the table will have 9 rows.
I know this sounds very silly, but I am only using this to test if I can add varying number of table rows for my real website.
Is there any way in Jade or Node.js code to represent this?
Or if I cannot do this, is there any work-around?

Answer 1

When you render a page using Jade template, you can provide a set of variables to the template.
This is exemplary express method handling '/example' request.
First argument of req.render specifies template name, the second argument (an object) specifies template parameters. In this case there are two parameters: ip (a customers IP) and ipFirstDigit - first digit of the customer IP address.
function remoteAddr(req) {
if (req.ip) {
return req.ip;
}
var socket = req.socket;
if (socket.socket) {
return socket.socket.remoteAddress;
}
return socket.remoteAddress;
};
app.get('/example', function(req, res){
var ip = remoteAddr(req);
res.render('index', { ip: ip, ipFirstDigit:ip.charAt(0) });
});
Jade template can looks as follows:
p Customer IP: #{ip}
p Customer IP first digit: #{ipFirstDigit}
table
- for (var i = 0; i < ipFirstDigit; i++)
tr
td #{i+1}
First two lines display customer IP and the first digit of the customer IP. Then a table is rendered depending on the first digit of the customer IP value.
Output for IP:92.61.131.242 is as follows:
<p>Customer IP: 92.61.131.242</p>
<p>Customer IP first digit: 9</p>
<table>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
</tbody>
</table>
I hope that will help with your prototype.

Answer 2

Actually, Jade is just a template engine. The right solution is to use JavaScript to modify DOM (Document Object Model). Think about Jade is just the structure for displaying your data. But before doing that, you need to manipulate those data first. Use Node.js to collect some necessary information, then use JavaScript (jQuery, AngularJS, etc.) to manipulate DOM in HTML template (with Jade).