Why is my ternary operator not working on a class in ERB to load images from a database to a bootstrap carousel?

Question

I am trying to load images in a bootstrap carousel with images stored in a PostgreSQL database on my Ruby on rails app. I am using ERB on the front end. With the code below nothing shows up... I believe it has something to do with my ternary operator on my class but i am not sure what the exact problem is....

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
   <% @post.first(3).each do |image, index| %>
    <li data-target="#myCarousel" data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>"></li>
   <% end %>
 </ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">
 <% @post.first(3).each do |image, index| %>
  <div class="item <%= index == 0 ? 'active' : '' %>">
    <%= link_to image_tag(image.image.url, class:"images") %>
    <div class="">
      <h3><%= index %></h3>
    </div>
  </div>
 <% end %>
</div>


<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
</a>
 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</div>

here index variable is nil, please use each_with_index instead of each to iterate over post objects — Ganesh, Dec 31 '17 at 09:53

score 1 · Accepted Answer · edited Jan 02 '18 at 20:23

Reason being your ternary operator are not getting index to make it working you need to do with each_with_index instead of each

So here is right way to do:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <!-- Indicators -->
 <ol class="carousel-indicators">
   <% @post.first(3).each_with_index do |image, index| %> <!--use each_with_index -->
    <li data-target="#myCarousel" data-slide-to="<%= index %>" class="<%= index == 0 ? 'active' : '' %>"></li>
   <% end %>
 </ol>

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">
 <% @post.first(3).each_with_index do |image, index| %> <!--use each_with_index -->
  <div class="item <%= index == 0 ? 'active' : '' %>">
    <%#= link_to image_tag(image.image.url, class:"images") %> <!--use image_tag -->
    <%=image_tag image.image.url ,class: "images"%>
    <div class="">
      <h3><%= index %></h3>
    </div>
  </div>
 <% end %>
</div>


<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Previous</span>
</a>
 <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
 </a>
</div>

I have just fixed the issue, if images are there than it should work now. let me know for further guidance.

Awesome that was exactly the problem, Thank you very much! – Brandon Carter Jan 02 '18 at 19:15 — Brandon Carter, Jan 02 '18 at 19:15

Why is my ternary operator not working on a class in ERB to load images from a database to a bootstrap carousel?

1 Answers1