How to pass an object from EJS to Node.js Router - Javascript, EJS, Node.js, MySQL

Question

I am working on looping through records in a MySQL table, displaying them in an EJS file, and when one is clicked on, routing to a page to edit the record. However, I am having trouble passing the single Object back to my routes.js file to route it to the edit page. I have had no problem looping through all the records and printing them, so I know the data is there. Here is the part of the EJS file where I am outputting all of the records for user selection:

<body>
<div class="container">

<div class="col-sm-6 col-sm-offset-3">

    <h1><span class="fa fa-chess"></span> View Roommate Agreements</h1><br>
    <p align="center">Click on a Roommate Agreement below to view the full response and edit if necessary.</p><br>

    <% for (var i=0; i < Agreements.length; i++) { %>
        <a href="/editAgreement" style="text-decoration: none; color: #333333">
            <div class="well" align="center">

                <h3>Roommate Agreement for Room #<%= Agreements[i].roomNumber%></h3>
                <p><%= Agreements[i].roommate1%></p>
                <p><%= Agreements[i].roommate2%></p>
                <% var Agreement = Agreements[i]%> //THIS is where I'm trying to declare the object
            </div>
        </a>
    <% } %>

    <hr>
    <p align="center">
        <a href="/agreement" class="btn btn-default btn-sm"><span class="fa fa-arrow-circle-left"></span> Back</a>
        <a href="/logout" class="btn btn-default btn-sm"><span class="fa fa-sign-out-alt"></span> Logout</a>
    </p>

</div>

</div>
</body>

And here is the Get function to route the object to the edit page. You can see where I'm trying to log the object to the console to make sure I'm getting the right information, but it's currently printing as "undefined".

app.get('/editAgreement', isLoggedIn, function(req, res) {
    res.render('editAgreement.ejs', {
        Employee: req.user
    })
    console.log(req.body.Agreement);
})

I'm not sure if the problem is how I'm declaring the object variable in EJS or how I'm trying to use it in the Get function, as I am new to Javascript. Any tips or help would be appreciated, thanks! :)

Are you trying to create unique links to each agreement? (Which contain a little extra data like the roommates' names for context?) — Stephen Gheysens
– Stephen Gheysens, Commented Mar 29, 2018 at 1:44
Blake, in order to access the Agreements variable in the template, you need to first pass it in from the render call, just like how you passed in Employee. — Stephen Gheysens
– Stephen Gheysens, Commented Mar 29, 2018 at 1:52
@StephenGheysens Once a specific agreement is clicked on, I want it to redirect to a page where the user can edit it. I know I will need to pass it from the render call, but I'm still working on getting the data there. That console.log function currently prints undefined in the console, which it wouldn't if the data was being passed correctly. — Blake Lewis
– Blake Lewis, Commented Mar 29, 2018 at 1:56
@ShimonBrandsdorfer I'm not quite sure what you mean. Can you clarify? — Blake Lewis
– Blake Lewis, Commented Mar 29, 2018 at 1:57

Taki · Accepted Answer · 2018-03-29 02:54:21Z

5

to passe variables to another page using GET you have to passe them in the url, with that you will expose you data and that's not safe and a lot of work if you have a lot of information to pass,you should passe only the id of the agreement to the get route, fetch the agreement and then render the view, like :

<% for (var i=0; i < Agreements.length; i++) { %>
    <a href="/editAgreement/<%= Agreements[i].id %>" style="text ...

and then :

app.get('/editAgreement/:id', isLoggedIn, function(req, res) {
    let agreementId = req.params.id;

    let agreement = // go fetch the agreement from the database like you did before with the list of agreements

    res.render('editAgreement.ejs', agreement)
})

edited Mar 29, 2018 at 2:54

answered Mar 29, 2018 at 2:04

Taki

17.7k5 gold badges28 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Blake Lewis Over a year ago

Thank you for your answer! This sounds promising, but I think I am still missing something. Here is what I have for my get route now:

app.get('/editAgreement/:agreementID', isLoggedIn, function(req, res) { 		let agreementID = req.params.agreementID; 		var query = ("SELECT * FROM RoommateAgreement WHERE agreementID = ?"); 		connection.query(query, agreementID, function(err, rows, fields){ 		 			res.render('editAgreement.ejs', { 				Employee: req.user, 				Agreement: rows 			}); 		}); 	});

Blake Lewis Over a year ago

And here is what I have in EJS: <% for (var i=0; i < Agreements.length; i++) { %> <a href="/editAgreement/<% Agreements[i].agreementID %>" style= Unfortunately, I am getting a Cannot GET /editAgreement error. If these comments are confusing, let me know as the code looks jumbled up. Thanks!

Taki Over a year ago

you're welcome :) , your code looks ok, just decide whether to use var or let ( google that :P ) , i think you just need to restart the node server and refresh the page with ctrl+F5 , inspect the link to make sure you have /editAgreement/5 or some id in your html

Blake Lewis Over a year ago

I don't think the EJS file is building the link correctly. It's not adding the ID to the end.

Taki Over a year ago

oh, sorry, my bad, it should be <%= Agreement... %> , i forgot the =

|

Shimon Brandsdorfer · Accepted Answer · 2018-03-29 02:07:31Z

If you want to get the Object sent along with your GET request, you need to send them along, and it doesn't seem from your code that you are doing it.

The quickest solution would be to use the querystring module. By requirting it on the top of your code, and then use it to send the agreement Object, as follows:

<% 

 const querystring = require('querystring');
 for (var i=0; i < Agreements.length; i++) { 
       var Agreement = Agreements[i]
 %>
        <a href="/editAgreement/?<%= querystring.stringify(Agreement) %>" style="text-decoration: none; color: #333333">
            <div class="well" align="center">

                <h3>Roommate Agreement for Room #<%= Agreement.roomNumber%></h3>
                <p><%= Agreement.roommate1%></p>
                <p><%= Agreement.roommate2%></p>
            </div>
        </a>
    <% } %>

Collectives™ on Stack Overflow

How to pass an object from EJS to Node.js Router - Javascript, EJS, Node.js, MySQL

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related