Use EJS with NODE

Question

I need help changing my html index to EJS.

I am using Node, and I have already made the changes in my configuration file for EJS to work properly.

In my index.ejs I have a table tr:

<div class="container">
<div class="starter-template">
    <table class="table">
        <thead>
            <tr>
               <th>✓</th>
               <th>ID</th>
               <th>Name</th>
               <th>Email</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
</div>

And that’s the script tag before the end of the body:

$.ajax({ type: 'GET', url: 'https://myapp.com/reservations', crossDomain: true, success:function(reservations){

reservas.forEach (function (data) {
    var reservation = [];


    reservation.push('<tr class="reservas">');
    reservation.push('<td> <input type="checkbox" name="checkbox"/></td>');
    reservation.push('<td>' + data._id + '</td>');
    reservation.push('<td>' + data.nome + '</td>');
    reservation.push('<td>' + data.email + '</td>');
    reservation.push('</tr>');

    $('tbody').append(reservation.join(""));

});

},

error:function(e){
    console.log(e);
}
});

It’s working correctly, but now I want to mix js with html.

In my configuration file I have this:

app.get('/', Function(req, res) { res.render('index', { title: 'DATA BASE' }); });

If anyone can help me, or at least give me a direction, because I have no idea how to use the EJS.

Thank you.

Answer 1

Marcelo, EJS is like Ruby’s ERB, using it in Node, you use it to add dynamic data to your views/templates, it allows you to run loops and the like and the result turns the file that will be served to the client (either browser or API).

From what I saw you must be using some web framework like express and routing the path "/" to render the template "index.ejs".

In this case before giving render you could do the following on Node.js

Change the:

app.get('/', function(req, res) { res.render('index', { title: 'DATA BASE' }); });

For:

app.get('/', function(req, res) { 
    // Array de objetos das reservas
    reservationsArray = [
        {_id: 1, nome: 'teste', email: '[email protected]'}, 
        {_id: 2, nome: 'teste1', email: '[email protected]'},
        {_id: 3, nome: 'teste2', email: '[email protected]'}
    ]
    res.render('index', { title: 'DATA BASE', reservations: reservationsArray }); 
});

In this case we are passing the value of the first page along with the title when rendering the index, remember that in a real application you will probably get the array of some method of some object that connects to some database.

Ai na index ejs. we add within tbody the following code:

<% reservations.foreach( function (reservation) { %>
    <tr class="reservas">
        <td><%= reservation._id %></td>
        <td><%= reservation.nome %></td>
        <td><%= reservation.email %></td>
    </tr>
<% }); %>

This will render reservations on the page without the need to use AJAX.

What you can do next is start working with Pushstate and some client-side template system (which may be EJS itself), in this case when someone is switching pages (e.g. page 2) you can change the URL without reloading the page and can using AJAX get the JSON data from the next page, pass them to the template function (the underscore for example has one) and then with the HTML output update the data.