CODEWITHSUNDEEP
htmlruby-on-railsrubytwitter-bootstrap
Hakeem Baba
Hakeem Baba

Reputation: 707

Iterating over bootstrap tab content in rails

I am trying to create tab contents using bootstrap in my rails application. My current implementation look like this

  <div class="tab-content" id="v-pills-tabContent">
    <div class="tab-pane fade show active" id="v-pills-England" role="tabpanel" aria-labelledby="v-pills-England-tab">
      <% @teams.each do | team | %>
        <% if team.team_country == "England" %>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="team" id="<%= team.id %>" value="<%= team.id %>">
            <label class="form-check-label" for="<%= team.id %>">
              <%= team.short_name %>
            </label>
          </div>
        <% end %>
      <% end %>
    </div>
    <div class="tab-pane fade" id="v-pills-France" role="tabpanel" aria-labelledby="v-pills-France-tab">
      <% @teams.each do | team | %>
        <% if team.team_country == "France"%>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="team" id="<%= team.id %>" value="<%= team.id %>">
            <label class="form-check-label" for="<%= team.id %>">
              <%= team.short_name %>
            </label>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>

This works and i get the expected 'teams' under the right countries. The problem is that, the code is so repetitive and I am looking for a way to make it more 'DRY'. When i try to iterate over the "tab-content" class, i do not get the teams under the right countries. This is what i tried

    <div class="tab-content" id="v-pills-tabContent">
     <% @teams.each do | team | %>
      <div class="tab-pane fade show active" id="v-pills-<%= team.team_country %>" role="tabpanel" aria-labelledby="v-pills-<%= team.team_country %>-tab">
        <%= team.short_name %>
      </div>
    <% end %>
   </div>

What would be the best way to iterate over tab contents and insert the values dynamically, whiles having teams under the right countries.

Upvotes: 0

Views: 99

Answers (2)

Dan PZ
Dan PZ

Reputation: 146

One option is to use group_by to group your array into countries and then, iterate over the groups:

<div class="tab-content" id="v-pills-tabContent">

  <% @teams.group_by(&:team_country).each do |country, country_teams| %>
    <div class="tab-pane fade show active" id="v-pills-<%= country %>" role="tabpanel" aria-labelledby="v-pills-<%= country %>-tab">

      <% country_teams.each do | team | %>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="team" id="<%= team.id %>" value="<%= team.id %>">
          <label class="form-check-label" for="<%= team.id %>">
            <%= team.short_name %>
          </label>
        </div>
      <% end %>

    </div>
  <% end %>
</div>

Upvotes: 5

Diego Freitas de Sousa
Diego Freitas de Sousa

Reputation: 1

a different approach, hope it helps

<div class="tab-content" id="v-pills-tabContent">
    <% array_options = @teams.pluck(:team_country).uniq %> <!-- get all countries !>
    <% array_options.each do |country| %>
       <div class="tab-pane fade show active" id="v-pills-<%=country%>" role="tabpanel" aria-labelledby="v-pills-<%=country%>-tab">
      <% @teams.each do | team | %>
        <% if team.team_country == <%=country%> %>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="team" id="<%= team.id %>" value="<%= team.id %>">
            <label class="form-check-label" for="<%= team.id %>">
              <%= team.short_name %>
            </label>
          </div>
        <% end %>
      <% end %>
    </div>
    <% end %>
</div>

That way no matter how much countries you have, its gonna create a tab-pane for each one.

Upvotes: 0

Related Questions