How to enumerate through an object's properties in EJS - node.js

I am trying to get for Each to enumerate through an object's properties and show up unique results. For example I'm trying to iterate through all the messages in a server and only display those where the current user is a sender
. And while doing that I want, to pull up all the receivers, create a group for each and display every message that interacts with that receiver. However I can only get to the point where I am displaying all messages but if a receiver comes twice it will create two separate groups with the same receiver instead of one.
I've tried to enumerate through the properties, but I get an error saying that you cannot apply a for Each on an object's properties.
<% message.forEach(function(message){%>
<% message.sender.id.forEach(function(message){ %>
<% if(currentUser._id.equals(message.sender.id)) {%>
<div>
<p>Message sent to <%= message.receiver.username %></p>
<ul>
<li><%= message.text %></li>
</ul>
</div>
<% }); %>
<%}%>
<%});%>
I'm expecting a div with each receiver and its correspondence instead I get multiple groups(one group per message found with the same receiver

I think you misplaced a bracket. Please try code below.
suggested code
<% message.forEach(function(message){%>
<% message.sender.id.forEach(function(message){ %>
<% if(currentUser._id.equals(message.sender.id)) {%>
<div>
<p>Message sent to <%= message.receiver.username %></p>
<ul>
<li><%= message.text %></li>
</ul>
</div>
<%};%> //I moved a bracket from this line to the next line
<%})%>
<%});%>

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).

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.

render array using for loops in EJS

I have an array of secret in user and I want to check if secret have only one element then simply print it in a paragraph tag but if secret have more elements then loop through all of them and show them on screen.
<%for(var i=0;i<userWithSecrets.length;i++){ %>
<% if(user[i].secret.length==1){%>
<p class="secret-text"><%=user[i].secret%></p>
<%}else{%>
<%for(var j=0;j<user[i].secret.length;j++){ %>
<p class="secret-text"><%=user[i].secret[j]%></p>
<%}%>
<%}%>
<%}%>

How can I set a div for each user

I'm trying to get display users name from mongodb and I figured out how to do so, but now I want to design it for the admin panel and I want to display each user in a separated div
"The code below it works fine with me, all I need to know is how to set each name in a div"
here is a snippet from the ejs code
<h4>
Users </h4>
<% for(let i=0; i<Users.length; i++) {%>
<ul> <li> <%= Users[i].name %></li></ul>
<% } %>
</div>
</div>
</div>`

Display only the desired parameters

I created an app following this tutorial (without scaffolding).
After I create an item I can click on it and it shows me a big list of parameters. Like here: http://s15.postimage.org/j6at9koiz/parameters.png .
The code which does that is:
<% if (todos && todos.length) { %>
<% for (var i in todos) { %>
<div class="row todo-item">
<div class="span8">
<h3><%- linkTo(todos[i].title, todoPath(todos[i].id)) %></h3>
</div>
<div class="span4"><h3><i class="icon-list-alt"></i><%= todos[i].status; %></h3></div>
</div>
<% } %>
<% } %>
To be more specific, the following line is the one which displays the links with the titles which take me to the list of the parameters for each item:
<%- linkTo(todos[i].title, todoPath(todos[i].id)) %>
Can I do something to display only some of the parameters and not the entire list which is displayed now?
Thank you!
You need to add view files for todo resource. If you're scaffolding, then geddy creates them by default. But otherwise, you have to add view files for todo in app/views/todos.
View files
_form.html.ejs
edit/new form
add.html.ejs
new resource view
/todos/add
edit.html.ejs
edit view
/todos/:id/edit
index.html.ejs
index view
/todos
show.html.ejs
show individual resource
/todos/:id
You can edit them manually. For changing how a individual todo item should appear on /todos/:id route, edit show.html.ejs
<div class="hero-unit">
<%- linkTo('Edit this todo', editTodoPath(params.id), {class: 'btn pull-right'}); %>
<h3>Params</h3>
<ul>
<li>todo.title</li>
<li>todo.property1</li>
<li>todo.property2</li>
</ul>
</div>

Resources