How can I convert a nested EJS foreach loop to HBS foreach loop?

Question

I was using EJS on my project but I had to change it to HBS for a reason. So I'm trying to translate my ejs code to hbs. However, the syntax of hbs really confuses me. This is my ejs code: (Sorry, the variables are not English. I hope you understand my code.)

 <% projeler.forEach(proje_dizisi=> { %>


<% proje_dizisi.forEach(proje=> { %>


  <div id="reg-modal<%= proje.id %>" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-xl">
      <div class="modal-content d-flex">
        <div class="modal-header text-center">
          <h5 class="modal-title w-100 display-1">
            <%= proje.proje_ismi %>
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">


          <div class="project_details_wrapper">

            <h4 class="text-center fs-3 mb-4">Proje Detayları</h4>

            <table class="table table-dark table-striped">
              <tbody>

                <tr>
                  <th>İsim</th>
                  <td>
                    <%= proje.isim %>
                  </td>
                </tr>
                <tr>
                  <th>Soy İsim</th>
                  <td>
                    <%= proje.soyisim %>
                  </td>

                <tr>
                  <th>Şirket</th>
                  <td>
                    <%= proje.sirket %>
                  </td>
                </tr>


                <tr>
                  <th>Departman</th>
                  <td>
                    <%= proje.departman %>
                  </td>
                </tr>



                <tr>
                  <th>Kategori</th>
                  <td>
                    <%= proje.proje_kategorisi%>
                  </td>
                </tr>



                <tr>
                  <th>Proje Açıklaması</th>
                  <td>
                    <%= proje.proje_aciklamasi %>
                  </td>
                </tr>


                <tr>
                  <th>Proje Eklenme Tarihi</th>
                  <td>
                    <%= proje.proje_eklenme_tarihi %>
                  </td>
                </tr>


              </tbody>
            </table>

            <img class="img-fluid" src="../images/randomForLibrary/<%= proje.proje_resmi_url %>">

            <p class="mt-3">

              <%= proje.proje_aciklaması%>


            </p>

            <div class="mt-5">

              <h3>Proje Dosyaları</h3>


              <a href="./user_files/<%= proje.proje_dosyalari_url %>" download>

                Projeye ait dosyaları indirin
                <!-- <input type="button" class="btn--green" value="Download"> -->
              </a>

            </div>


          </div>

I need the version of HBS of my code. I can't convert it using #each syntax. Thanks for your help.

Answer 1

The two .forEach loops that wrap your template are suspicious to me and force me to assume that projeler is an array of arrays. With this assumption, there isn't much more that is required to convert your template to Handlebars than replacing the .forEach loops with #each loops and, of course, changing the ejs tags to mustaches {{ }}.

Your converted template would look something like:

{{#each projeler as |proje_dizisi|}}
  {{#each proje_dizisi as |proje|}}
    <div id="reg-modal{{proje.id}}" class="modal fade" tabindex="-1">
      <div class="modal-dialog modal-xl">
        <div class="modal-content d-flex">
          <div class="modal-header text-center">
            <h5 class="modal-title w-100 display-1">{{proje.proje_ismi}}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="project_details_wrapper">
              <h4 class="text-center fs-3 mb-4">Proje Detayları</h4>
              <table class="table table-dark table-striped">
                  <tbody>
                    <tr>
                      <th>İsim</th>
                      <td>{{proje.isim}}</td>
                    </tr>
                    <tr>
                      <th>Soy İsim</th>
                      <td>{{proje.soyisim}}</td>
                    </tr>
                    <tr>
                      <th>Şirket</th>
                      <td>{{proje.sirket}}</td>
                    </tr>
                    <tr>
                      <th>Departman</th>
                      <td>{{proje.departman}}</td>
                    </tr>
                    <tr>
                      <th>Kategori</th>
                      <td>{{proje.proje_kategorisi}}</td>
                    </tr>
                    <tr>
                      <th>Proje Açıklaması</th>
                      <td>{{proje.proje_aciklamasi}}</td>
                    </tr>
                    <tr>
                      <th>Proje Eklenme Tarihi</th>
                      <td>{{proje.proje_eklenme_tarihi}}</td>
                    </tr>
                  </tbody>
                </table>
              <img class="img-fluid" src="../images/randomForLibrary/<%= proje.proje_resmi_url %>">
              <p class="mt-3">{{proje.proje_aciklaması}}</p>
              <div class="mt-5">
                <h3>Proje Dosyaları</h3>
                <a href="./user_files/{{proje.proje_dosyalari_url}}" download>
                  Projeye ait dosyaları indirin
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  {{/each}}
{{/each}}

I have created a fiddle for reference.