Use EJS with NODE

Question

Use EJS with NODE

Navigation

#1 by (0 votes)

1

I need help to change my html index to EJS.

I'm using Node, and I've 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 this is 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 properly, but now I want to mix the js with the html.

In my configuration file I have this:

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

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

Thank you.

javascript jquery ajax

asked by anonymous 02.09.2014 / 23:53

1 answer

Error in Execute SQLTask Result Values of proportional Y

score 0 · Accepted Answer

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

I've seen that you should be using some web framework like express and routing the path "/" to render the template "index.ejs".

In this case before rendering you could do the following in Node.js

Change the:

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

By:

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, it is worth remembering that in an actual application you will probably get the array of some method of some object that connects to some database. / p>

At index.ejs we added the following code into the tbody:

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

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

What you can do next is to start working with PushState and some client-side templating system (which can be EJS itself), in this case when someone is switching pages (eg page 2) you can change the URL without reloading the page and can use AJAX to get the data in JSON 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.