Dynamic variable and content ejs

Question

i have a list of projects, each have one tag :

project 1 : tag : Home

project 2 : tag : Appartement

...

And i want to be able to display only projects who includes one selected tag

If i put a tag it's working :

<% if (project.tags.includes('Appartements')) { %>
    <h2 class="project-title"><%= project.title %></h2>
<%}%>

But i want to use button to change this tag :

<button onclick="changeSelectedTag('Appartements')">Appartements </button>
<button onclick="changeSelectedTag('Maisons')">Maisons </button>


<script type="text/javascript">
    changeSelectedTag = function(tag) {
        selectedTag = tag;
        console.log(selectedTag)
    }
</script>

The console log is working, i can see the selectedTag updated each time i press a button. but i i put this code, i have 0 projects and selectedTag is empty :

<% if (project.tags.includes(selectedTag)) { %>

FullCode :

<div class="body-content">
    <div class="body-tags">
        <%selectedTag = 'Appartements'%> 
        <button onclick="changeSelectedTag('Appartements')">Appartements</button>
        <button onclick="changeSelectedTag('Maisons')">Maisons</button>
    </div>
    <div class="projects-container">
        <% projects.forEach((project) => { %>

        <% if (project.tags.includes(selectedTag)) { %>
            <div class="projects-content">
                <h2 class="project-title"><%= project.title %></h2>
            </div>
            <%}%>
        <% }); %>
    </div>
</div>

<script type="text/javascript">
    changeSelectedTag = function(tag) {
        selectedTag = tag;
        console.log(selectedTag)
    }
</script>

RENDER in my controller

exports.list = (req, res) => Project.find((err, projects) => {
  if (err) return next(err);
  let selectedTag;
  return res.render('../templates/projects.ejs', { projects: projects, selectedTag: selectedTag });
});

CONTENT i want to display :

<div id="here" class="items-container">
                <% projects.forEach((project) => { %>
                <%selectedTag = 'Appartements'%>
                <% if (project.tags.includes(selectedTag)) { %>
                    <div class="items-content">
                        <img onmouseover="onProjectHover('<%=project.id%>-img', '<%=project.id%>-titles')"  class="item-img" src="/<%=project.images.main.url%>" alt="<%=project.images.main.alt%>">
                        <div onmouseleave="onProjectLeave('<%=project.id%>-img', '<%=project.id%>-titles')" id="<%=project.id%>-img" class="item-hover-content">
                            <div class="item-hover-content-title">Surface : <span class="item-hover-content-value"><%=project.surface%> m2</span></div>
                            <div class="item-hover-content-title">Budget : <span class="item-hover-content-value"><%=project.budgect%></span></div>
                            <div class="item-hover-content-title">Durée : <span class="item-hover-content-value"><%=project.duration%> mois</span></div>
                            <button class="item-hover-content-btn"><a href="<%=project.slug%>">Voir le projet <i class="fas fa-arrow-right"></i></a></button>
                        </div>
                        <div id="<%=project.id%>-titles" class="item-titles">
                            <h2 class="item-title"><%= project.title %></h2>
                            <p class="item-city"><%= project.cities %></p>
                        </div>

                    </div>
                    <%}%>
                <% }); %>
            </div>

Answer 1

This ejs code works. I use pure javascript. You can also use jquery.

<div class="body-content">
  <div class="body-tags">
    <button id='Appartements' onclick="changeSelectedTag('Appartements',<%=JSON.stringify(projects)%>)">Appartements</button>
    <button onclick="changeSelectedTag('Maisons',<%=JSON.stringify(projects)%>)">Maisons</button>

  </div>
  <div id='here' class="projects-container"></div>
</div>
<script type="text/javascript">
  changeSelectedTag = function(tag, projects) {
    selectedTag = tag;
    console.log(selectedTag);
    var main = document.getElementById('here');
    main.innerHTML = '';
    console.log(projects);
    projects.forEach(el => {
      if (el.tags.includes(selectedTag)) {
        var div = document.createElement('div');
        div.className = 'projects-content';
        var h2 = document.createElement('h2');
        h2.className = 'project-title';
        h2.innerHTML = el.title;
        div.appendChild(h2);
        main.appendChild(div);
      }

    });

  }
  document.getElementById('Appartements').click();
  //changeSelectedTag('Appartements',<%=JSON.stringify(projects)%>);
</script>