Lists of data

So far we have only inserted single values and words into an already existing erb template. We will now look at using ruby to generate more of the template dynamically.

Suppose you have a ruby array that you want to turn into an html list:

# in app.rb

get '/fruit' do
  @fruits = ["Bananas", "Apples", "Raspberries"]
  erb :fruits_view
end

We can do this by using the @fruits array’s each method to iterate over the elements and put them into the page one-by-one.

<ul>
  <% @fruits.each do |fruit| %>
    <li><%= fruit %></li>
  <% end %>
</ul>

You might notice that we’ve used a different type of erb tag for the do ... end block: <% %> instead of <%= %>. This is really important:

Here, the bits we want adding are the elements of the array, so only they have the <%= %> tags. The code will cause the following html to be generated:

<ul>
  <li>Bananas</li>
  <li>Apples</li>
  <li>Raspberries</li>
</ul>

You can also use the same technique to generate tables and other html (lists of divs etc.).

Exercise

  1. Clone the code for this exercise https://github.com/code61/sinatra_c3s3.
  2. Add code to the body of todo.erb, so that the @todos display as an ordered list.
  3. Add code to the body of schedule.erb, so that the items in the @schedule display as rows in a table. Note that @schedule is an array of arrays - you’ll need to iterate over the first array, and within the loop use [] to pull out the items.
  4. Add, commit and push your code to Github.
  5. Take a look at the get '/rsvps' block. Try the CSV.read bit in irb, to see what it does. Have a go at writing the code to categorise rsvps into acceptances/rejections and count them.
  6. Update the rsvps.erb view, so that the right information is displayed.


Prev | Next