0

I have an array of things, things = [1, 500, 900, 0, -105, -8, 16, 4] and I want to display them in red, green or black in my view based on whether they're larger than zero, smaller than zero or equal to zero.

Right now my code looks like:

<%= @things.each do |p|%>
 <% if p > 0 %>
      <%= p  %>
    <% elsif p < 0 %>
      <%= p %>
    <% else %>
      <%= p %>
 <% end %>
<% end %>

I'm not displaying the numbers correctly to start, and I've gone through a few iterations of putting them in divs and nothing seems to work. Once I get 'em in classes, I can add colors pretty easily. (I also need to keep them in the same order they're in in the array)

Any help would be greatly appreciated.

3 Answers 3

3

Not sure what's the issue here

 <% @things.each do |p|
     if p < 0
       class_name = 'red'
     elsif p > 0 
       class_name = 'green'
     else 
       class_name = 'black'
     end %>
     <div class="<%=class_name%>"><%= p %></div> 
<% end %>

Then css :

.red{color:red;}
.green{color:green;}
.black{color:black;}

Edit : In your example, you were using <%= @things.each. Don't use <%= for things that are not supposed to output anything

6
  • Thanks. No real issue, just been thinking about this for too long and my brain kind of stopped working. Aug 2, 2012 at 17:35
  • See my answer for a slightly more terse way to get over/under/equals 0 using the spaceship operator.
    – Phrogz
    Aug 2, 2012 at 17:43
  • Also, note that using CSS class names that describe the style you wish to impart is generally a bad idea. +1, however, for providing a working solution.
    – Phrogz
    Aug 2, 2012 at 17:44
  • I agree with you, except that sometimes it can come in handy for short-straight-forward declarations. For example, I like to declare a class called clear that clear:both; to quickly apply it on some elements Aug 2, 2012 at 17:51
  • @AnthonyAlberto My Rails app is angry - syntax error, unexpected keyword_elsif, expecting keyword_end elsif p > 0 Aug 2, 2012 at 17:51
0

If you want them grouped by positive/negative/0

<% @things.group_by{ |n| n<=>0 }.sort.each do |sign,items|%>
  <ul class="<%= sign==-1 ? 'negative' : sign==1 ? 'positive' : 'zero'%>">
    <% items.each do |item| %>
      <li><%= item></li>
    <% end %>
  </ul>
<% end %>

If you want them in array order, just classed

<ul>
  <% @things.each do |thing|
    css = case thing <=> 0
      when -1 then "negative"
      when  0 then "zero"
      when  1 then "positive"
    end
    %>
    <li class="<%=css%>"><%= thing %></li>
  <% end %>
</ul>

Note that you incorrectly have an equals sign at the start of your each wrapper:

<%= @things

...which will cause the to_s representation of the entire array to be output (you don't want that).

0

The first thing I can think of is build a view helper

def set_color number 
  case
    when number == 0 
       "black"
    when number > 0
       "green"
    when number < 0
       "red"
  end
end

and in the view

<% @things.each do |p|%>
<div class="<%= set_color(p)%>"> <%= p %> </div>
<% end %>

Finally do the CSS

1
  • +1 for working, but -1 for terrible style. Remove every return statement from that method and you get the same result but more idiomatic code.
    – Phrogz
    Aug 2, 2012 at 17:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.