'Divs inside my ejs loop are not rendering

<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<% guser._roles.forEach(async el => {
  let urole = await guild.roles.cache.get(el);
  console.log(urole.name)
  %>
  <div class="p-2 me-2 rounded" style="background-color: #<%- urole.color %>">
    <p><%= urole.name %></p>
  </div>
  <% }); %>
</div>

Everything inside the forEach loop is not getting rendered on the page.

Here's the full code for the page


<div class="mx-4">
<div class="container-sm center profile-container">
  <div class="d-flex">
  <div class="ml auto">
  <div class="d-inline-block">
    <img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png?size=128" class="rounded-circle" style="border: 1px solid #555; max-width: 25%;">
    <div class="d-inline-block" style="padding-left: 15px;">
      <h2 style="font-family: 'Secular One';"><%- guser.user.username %> #<%- guser.user.discriminator %></h2>
  </div>
</div>
</div>
</div>
<hr style="margin-top: 20px; margin-bottom: 20px;">
  <h5 style="font-family: 'Secular One';">Amari Details</h5>
<div class="row mx-2">
  <div class="col-sm p-3 align-self-center me-4 mb-3" style="background-color: #1e1e1e; border-radius: 10px;">
    <div class="d-flex">
      <div class="p-2 text-center">
        <p class="amari">Server Rank</p>
        <p class="amari" style="background-color: #101010; border-radius: 5px; color: #24c8ff; padding: 1px;">#<%= lbpos %></p>
      </div>
      <div class="p-2 text-center">
        <p class="amari">Weekly Rank</p>
        <p class="amari" style="background-color: #101010; border-radius: 5px; color: #24c8ff; padding: 1px;">#<%= wlbpos %></p>
      </div>
      <div class="p-2 text-center">
        <p class="amari">Weekly Exp</p>
        <p class="amari" style="background-color: #101010; border-radius: 5px; color: #24c8ff; padding: 1px;"><%= amri.weeklyExp %></p>
      </div>
    </div>
    <div class="progresss" id="progresss">
      <div class="progress__fill"></div>
    </div>
    <script>updateProgressBar(<%- perc %>);</script>
  </div>
  <div class="col-sm p-2 mb-3" style="background-color: #1e1e1e; border-radius: 10px;">
    <div class="p-1 text-center">
      <p class="amari">Level</p>
      <p class="amari" style="background-color: #101010; border-radius: 5px; color: #24c8ff; padding: 1px;"><%= amri.level %></p>
    </div>
    <div class="p-1 text-center">
      <p class="amari">Exp</p>
      <p class="amari" style="background-color: #101010; border-radius: 5px; color: #24c8ff; padding: 1px;"><%= curexp %> / <%= remainexp %></p>
    </div>
  </div>
</div>
<hr style="margin-top: 20px; margin-bottom: 20px;">
  <h5 style="font-family: 'Secular One';">Roles</h5>        
<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<% guser._roles.forEach(async el => {
  let urole = await guild.roles.cache.get(el);
  console.log(urole.name)
  %>
  <div class="p-2 me-2 rounded" style="background-color: #<%- urole.color %>">
    <p><%= urole.name %></p>
  </div>
  <% }); %>
</div>
</div>
</div>
<%- include("partials/footer") %>```
htmlnode.jsejs


Solution 1:[1]

For each line of JS code you need an opening and closing ejs-tag, like so:

<div style="display: flex; flex-wrap: wrap; justify-content: center;">
<% guser._roles.forEach(async el => { %>
  <% let urole = await guild.roles.cache.get(el); %>
  <% console.log(urole.name) %>
  <div class="p-2 me-2 rounded" style="background-color: #<%- urole.color %>">
    <p><%= urole.name %></p>
  </div>
  <% }); %>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 VebDav

Related Questions