My EJS include causes error in my express app. - node.js

I am trying to make my site more component based using includes in my application but it just throws an error to the page when I reload it. I have tried:
<%=include _partials/site-head/site-head %>
And I have tried:
<%=include virtual="_partials/site-head/site-head" %>
Here is the code.
<%=include virtual="_partials/site-head/site-head" %>
<h1><%= title %></h1>
<% for(var i=0; i<userlist.length; i++) {%>
<p><%= userlist[i].name %></p>
<% } %>
<%=include virtual="_partials/site-foot/site-foot" %>

Tag <%= is used to output variables, for code need to use <%- %>. So to include views you need to write like this:
<%- include _partials/site-head/site-head.ejs %>
<h1><%= title %></h1>
<% for(var i=0; i<userlist.length; i++) {%>
<p><%= userlist[i].name %></p>
<% } %>
<%- include _partials/site-head/site-foot.ejs %>
Also read this answer.

My Answer that solved this was to check what version of express your using, I was using an old version which didnt like include.

Related

Does 'substring' work directly in an EJS file

<%- include("partials/header"); -%>
<h1>Home</h1>
<p><%= startingContent %></p>
<% posts.forEach(function(post){ %>
<h1><%=post.title%></h1>
<p>
<%=post.content.substring(0, 100) + " ..."%>
<!-- This line's giving me an error, I dont know why -->
Read More
</p>
<% }) %> <%- include("partials/footer"); -%>
Normally, it's supposed to reduce the number of characters to be displayed to a specific number(in this case 100).

File type:ejs.I have a problem with syntacxis

<ul>
<% if ('contacts'.length) { %> <% 'contacts'.forEach(({ link, name }) => { -%>
<li>
<%= name %>
</li>
<% }) %> <% } %>
</ul>
I have a syntacxis problem with this part of ejs file.What would be the correct syntax?
I try ejslint,but he doesnt support me

Nested <span> tag inside link_to in Rails 7

I need the following HTML output exactly as shown below:
<section id='option1'>
<a href='#option1'><h6>Option1</h6><span>></span></a>
<div class='content'>Option1 content...</div>
</section>
I am using a Ruby block to create multiple sections like the one shown above in order to build an accordion UI. However, the problem is that the <span> tag won't nest inside the <a> tag properly. I have checked out other SO queries on the subject, but can't seem to find a solution.
What I hope to end up with is a Ruby block that looks something like this:
<% %w[option1 option2].each do |act| %>
<%= tag.section do %>
<%= link_to("#{act}".capitalize, "##{act}", {class: 'centered', data: { turbo_frame:"content"}}) do %>
<%= tag.h6 act do %>
<%= tag.span raw ">" %>
<% end %>
<% end %>
<% end %>
<% end %>
But I get a undefined method 'stringify_keys' for "option1":String
Can someone help me construct a nested content_tag that puts all the required elements in the right place?
Ok, so with some fiddling with the HTML structure, I came up with the following that works:
<div id='accordion'>
<% %w[option1 option2 ... optionN].each do |act| %>
<%= tag.h2(id:"accordion_header", class: "ui-accordion-header") do %>
<%= link_to("#{act}".capitalize, "#{act}") %>
<% end %>
<%= tag.div(id: "#{act}", class: "ui-accordion-content") do %>
<%= render "/sidebars/content/#{controller_name}/#{act}", formats: :html, handlers: :erb %>
<% end %>
<% end %>
</div>
<script>
$("#accordion").accordion();
</script>
I still haven't figured out how to get the anchor tags to respond to the click event and render the appropriate content via turbo-frames yet, so feel free to comment on how to do that. The documentation for Turbo is (at the present) woefully inadequate.

I am using Node.JS and there is a mistake in expecting ')'. Please how can i solve it

`<h2>Hobbies</h2>
<ul>
<%= data.hobby.forEach(function(item)
{ %>
<li>
<%= item %>
</li>
<%
}); %>
`
here is the mistake : SyntaxError: Unexpected token ')' in C:\src\express\views\profile.ejs while compiling ejs
If the above error is not helpful, you may want to try EJS-Lint:
why you have added = before foreach.that's the issue. remove that = sign. & you code will work.
`<h2>Hobbies</h2>
<ul>
<% data.hobby.forEach(function(item)
{ %>
<li>
<%= item %>
</li>
<%
}); %>
Reference:
https://ejs.co/#docs
Instead of using "%>" and "<%" inside the function I would make it return a string with the desired content.

How to array of objects in template ejs?

I have a results variable that is an array of objects. I carry the results variable from my javascript file to my main route file. I am trying to render my page to display lists of each object in my template ejs file. I am able to list everything fine, but the lists are coming out as [object object] instead of the actual words that are in the objects. How do I get this to display as strings in my template file?
This is my route file:
app.get('/announcement', function(req,res){
var getAnnouncements = require('../public/javascripts/announcement.js'); //Load the module, get the name of the script file
//define the functions here
var onSpreadsheetSuccess = function (results) { //result is announcementArray
//add results list to template);
res.render('announcement', {title: "Announcement page", results: results});
}
getAnnouncements.loadSheet(onSpreadsheetError, onSpreadsheetSuccess); //call the function from script with the parameters passed
})
This is what I am doing in my template ejs file:
<ul>
<% results.forEach(function(result){ %>
<li><%= result %></li>
<% }); %>
</ul>
<ul>
<% for(var i=0; i<results.length; i++) { %>
<li>
<%= results[i] %>
</li>
<% } %>
</ul>
This will show list of id of your results, just change _id by your property of objects as you want to show.
<ul>
<% results.map((result)=>{ %>
<li>
<%= result._id %>
</li>
<% }) %>
</ul>
My answer is as follows. I changed one line from the answer by other person.
<ul>
<%for (var result in results){%>
<li><%=result%>:<%=results[result]%></li>
<%}%>
</ul>
With modern JS it can be simplified to
<ul>
<% for (var result of results) { %>
<li>
<%= result %>
</li>
<% } %>
</ul>
You should be fine with this:
<ul>
<% for(let i = 0; i < results.length; i++){ %>
<li><%= results[i].title %></li>
<% } %>
</ul
or when you rather like to use the forEach:
<ul>
<% results.forEach( function (result) { %>
<li><%= result.title %></li>
<% }) %>
</ul
the object you push(ed) into your array:
const result = {
title: anyTitle,
input: anyInput
}
Try this:
<ul>
<%for (var result in results){%>
<li><%=result%></li>
<%}%>
</ul>

Resources