SyntaxError: Unexpected identifier when using ejs in nodejs - node.js

I am following The Net Nijna's tutorial on youtube.
I reached tutorial number 27, working with partials in ejs. Everything works until I add the <% include partials/nav.js %>, once I add this code I recieve:
SyntaxError: Unexpected identifier in (file location) testapp\views\profile.ejs while compiling ejs
If the above error is not helpful, you may want to try EJS-Lint:
https://github.com/RyanZim/EJS-Lint
Or, if you meant to create an async function, pass async: true as an option.
at new Function ()..... blah blah blah...
If I remove it, my ejs all works fine.
<body>
<% include partials/nav.ejs %>
<h1>Welcome to the profile of <%= person %> !</h1>
<p><strong> Age: <%= data.age %></strong></p>
<p><strong> Job: <%= data.job %></strong></p>
<p><strong> Pet: <%= data.pet %></strong></p>
<h2>Hobbies</h2>
<ul>
<% data.hobbies.forEach(function(item){ %>
<li><%= item %></li>
<%});%>
</ul>
</body>
can you help a student out? Thanks a ton!

Missing hyphen and need to invoke the include function.
<%- include('partials/nav') %>

I was stuck at the same problem and used -include('#filename');
it worked

Use: <%- include('folder/file') %>
agreeing with #Joseph Varilla
Not necessary to include engine extension as this should have been done in app.js or index.js file

Related

How to edit the render information with if else in ejs file

Hi i am trying to add condition for the render value in ejs file. i want to do something if value is equal to blah blah. I tried as shown below.
<% if (user) { %>
<div class="user_info">
<div>
<p>User Name<%= user.username %></p>
<p>User bio<%= user.user_bio %></p>
//here i want to put if else statement
//like this
<% if (user.user_age = null){ %>
<p>Your age is not defined. </p>
<% } %>
<% else if (user.user_age = 10){ %>
<p>You are a <%= user.user_age %> old tween!! </p>
<% } %>
<% else { %>
<p>You are a <%= user.user_age %> old Adult!! </p>
<% } %>
</div>
</div>
<% } else { %>
<p>No User!</p>
<% } %>
Clearly this if else statement i tried is not working.
How can i do this?
I have worked on this type of project something like that of whatsapp web,
its going to be a little hard because there are not many good tutorials out there, but I can give you some tips or steps you need to follow, to give the code would be very lengthy and its propriety code that I've worked on so I cant share that.
First of all to connect to server using a mobile or qr scanner you have to have a private or seperate socket to connect to the server. For that you can have to use web sockets which is a big task but you can use a simple socket library socket.io its fairly easy.
You will have to create a unique socket and key which you need to pass through the r itself(you have to render the qr code image through node js with the key as value) for that you can use 'qrcode' npm package.
For now your task here is done.
The difficult part starts here. You have to make an android/ios app to use that data which will use it in its own way, for ex in whatsapp when you can qr code from app it logs you in to your account and load contacts, messages, etc on the screen.
Im not an android or app developer for now, that part has to solved by you.

Unexpected token '/' in {FILE} while compiling ejs

I am working on this: https://www.youtube.com/watch?v=6FOq4cUdH8k
For some reason, the following line is causing the error in the title.
<% include ./partials/messages %>
Removing the line above solves the problem.
I have confirmed that it is not the messages file as there are no slashes in it.
<% if(typeof errors != 'undefined') { %>
<% errors.forEach(function(error){ %>
<%= error.msg %>
<% }); %>
<% } %>
as you can read in the official documentation
Includes are relative to the template with the include call. (This
requires the 'filename' option.) For example if you have
"./views/users.ejs" and "./views/user/show.ejs" you would use <%-
include('user/show'); %>.
You'll likely want to use the raw output tag (<%-) with your include
to avoid double-escaping the HTML output.
so instead of
<% include ./partials/messages %>
Write
<%- include ("./partials/messages") %>
Why?
Template tag <%- outputs the unescaped value into the template, whereas <% 'scriptlet' tag is used for control-flow, no output. The parenthesis and " " are used for filename location

How to place an EJS tag within another

I am using EJS as my templating engine. I am passing variables from node js to ejs like...
router.get("/AdminDatabase", function(req, res) {
res.render('Pages/AdminDatabase', {title: 'WebFormsAdmin', role: 'System Admin' });
});
I am building a role base control and for this I want to change the header of the page base on the role of user.
<% include ../partials/Common/header_<%= role %> %>
The problem is with the above segment. How can I place the variable role inside this EJS code segment?
My header files are
header_System Admin.ejs,
header_Survey Admin.ejs,
header_Survey Taker.ejs
A workaround would be to do a conditional render like so:
<% switch (role) {
case 'System Admin': %>
<% include ./partials/header_System_Admin %>
<% break; %>
<% case 'Survey Admin': %>
<% include ./partials/header_Survey_Admin %>
<% break; %>
<% default: %>
<% include ./partials/header_Survey_Taker %>
<% break; %>
<% } %>
Note that the first case must be grouped with the switch declaration. Make sure the paths are correct for your partials.
You can concatenate the path and the variable.
<%- include('../partials/Common/header_'+role) %>

Underscore Js _.each used with ejs error

I am trying to display the value in array using _.each and EJS dynamically. I am getting the values when i do it manually,but getting Unexpected token ; error while using _.each loop.
Here is the code
`<% _.each(pro,function(prof) { %>
alert(prof.Name);
<% } %>`
pro = {[object Object],[object Object]}
when i do it manually,i get the output.
i.e.
`<%= pro[0].Name %>`
Need help! Any other suggestions? Thanks
You seem have missed a parentheses here:
<% }) %>`
Beyond that, I'm not sure you can use underscore inside your EJS templates.
Try using a regular for.
<% for(var i=0; i<prof.length; i++) {%>
<li><%= prof[i] %></li>
<% } %>

Render a variable as HTML in EJS

I am using the Forms library for Node.js (Forms), which will render a form for me on the backend as so:
var signup_form = forms.create({
username: fields.string({required: true})
, password: fields.password({required: true})
, confirm: fields.password({
required: true
, validators: [validators.matchField('password')]
})
, email: fields.email()
});
var signup_form_as_html = signup_form.toHTML();
The final line var signup_var signup_form_as_html = signup_form.toHTML(); creates a block of HTML which looks as such:
<div class="field required"><label for="id_username">Username</label><input type="text" name="username" id="id_username" /></div><div class="field required"><label for="id_password">Password</label><input type="password" name="password" id="id_password" /></div><div class="field required"><label for="id_confirm">Confirm</label><input type="password" name="confirm" id="id_confirm" /></div><div class="field"><label for="id_email">Email</label><input type="text" name="email" id="id_email" /></div>
Basically just a long string of HTML. I then try to render it using EJS and Express using the following code:
res.render('signup.ejs', {
session: loginStatus(req)
, form: signup_form_as_html
});
But on rendering the HTML is simply the string that I posted above, rather than actual HTML (and thus a form as I want). Is there any way to make that string render as actual HTML using EJS? Or will I have to use something like Jade?
With EJS you can have several tags:
<% code %>
... which is code that is evaluated but not printed out.
<%= code %>
... which is code that is evaluated and printed out (escaped).
<%- code %>
... which is code that is evaluated and printed out (not escaped).
Since you want to print your variable and NOT escape it, your code would be the last type (with the <%-). In your case:
<%- my_form_content %>
For more tags, see the full EJS documentation
October 2017 update
The new ejs (v2, v2.5.7) development is happening here: https://github.com/mde/ejs
The old ejs (v0.5.x, 0.8.5, v1.0.0) is available here https://github.com/tj/ejs
Now with ejs you can do even more. You can use:
Escaped output with <%= %> (escape function configurable)
Unescaped raw output with <%- %>
Newline-trim mode ('newline slurping') with -%> ending tag
Whitespace-trim mode (slurp all whitespace) for control flow with <%_ _%>
Control flow with <% %>
So, in your case it is going to be <%- variable %> where variable is something like
var variable = "text here <br> and some more text here";
I had the same issue with rendering the textarea input from from a wysiwyg editor saved as html in my database. The browser will not render it but displayed the html as text. After hours of searching, I found out
<%= data %> escaped data while
<%- data %>left data 'raw'(unescaped) and the browser could now render it.
As per the ejs doc
<% 'Scriptlet' tag, for control-flow, no output
<%_ ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it
<%= Outputs the value into the template (HTML escaped)
<%- Outputs the unescaped value into the template
<%# Comment tag, no execution, no output
<%% Outputs a literal '<%'
%> Plain ending tag
-%> Trim-mode ('newline slurp') tag, trims following newline
_%> ‘Whitespace Slurping’ ending tag, removes all whitespace after it

Resources