Exploring and organizing data for customized lists in Ruby/ERB

Question

Exploring and organizing data for customized lists in Ruby/ERB

I am looking to create a list layout similar to the one found here:

This is the code I have so far:

<div class="wrapper">
 <ol>
  <% CraigslistZipCode.select("distinct region, fee").each do |record| %>
   <li><%= record.region %> <%= record.fee %></li>
  <% end %>
 </ol>
</div>

I am struggling to format the data into three columns as desired while looping through the records. I want to prevent the list from becoming excessively long and instead split it into multiple columns after a certain number of items.

html css ruby

Answer 1

Answer №1

If you want to limit each column to a maximum of 5 entries, here's a simple solution:

max_columns = 5

elements = (1..17).to_a
# => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]

# Fill the array with nil values so that it can be evenly divided by max_columns
elements.fill(nil, elements.size, ((max_columns - elements.size) % max_columns))
# => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, nil, nil, nil]

# Divide the array into groups of max_columns and then transpose them
elements.each_slice(max_columns).to_a.transpose
# => [[1,  6,  11, 16],
#     [2,  7,  12, 17],
#     [3,  8,  13, nil],
#     [4,  9,  14, nil],
#     [5, 10,  15, nil]]

Now you have an array of rows ready for displaying in columns, just ensure to handle any empty values inserted through padding.

The reason behind adding empty values is because Array#transpose requires all entries to be of equal length.

Answer 2

If you want to limit each column to a maximum of 5 entries, here's a simple solution:

max_columns = 5

elements = (1..17).to_a
# => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]

# Fill the array with nil values so that it can be evenly divided by max_columns
elements.fill(nil, elements.size, ((max_columns - elements.size) % max_columns))
# => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, nil, nil, nil]

# Divide the array into groups of max_columns and then transpose them
elements.each_slice(max_columns).to_a.transpose
# => [[1,  6,  11, 16],
#     [2,  7,  12, 17],
#     [3,  8,  13, nil],
#     [4,  9,  14, nil],
#     [5, 10,  15, nil]]

Now you have an array of rows ready for displaying in columns, just ensure to handle any empty values inserted through padding.

The reason behind adding empty values is because Array#transpose requires all entries to be of equal length.

Answer 3

Answer №2

If you want to create groups of items, you can utilize the each_slice method. Ensure that each group contains enough items to fill three columns when displayed.

<%
data = CraigslistZipCode.select("distinct region, fee")
group_size = (data.count / 3.0).ceil
%>
<% data.each_slice(group_size) do |group| %>
  <div class="wrapper">
    <ol>
      <% group.each do |zip_code| %>
        <li><%= record.region %> <%= record.fee %></li>
      <% end %>
    </ol>
  </div>
<% end %>

Answer 4

If you want to create groups of items, you can utilize the each_slice method. Ensure that each group contains enough items to fill three columns when displayed.

<%
data = CraigslistZipCode.select("distinct region, fee")
group_size = (data.count / 3.0).ceil
%>
<% data.each_slice(group_size) do |group| %>
  <div class="wrapper">
    <ol>
      <% group.each do |zip_code| %>
        <li><%= record.region %> <%= record.fee %></li>
      <% end %>
    </ol>
  </div>
<% end %>

Exploring and organizing data for customized lists in Ruby/ERB

Answer №1

Answer №2

Similar questions

What is the best way to loop through an array of JSON data in order to consistently retrieve the initial JSON object?

Height of border not being displayed accurately

Modify input attribute by selecting a label

What is the best way to shift a text element within the footer section?

When jQuery adds new elements, their CSS may not be applied accurately

Issue with margin:auto in Internet Explorer 5

Emphasize the center row within a moving table

Unable to correctly declare and display UTF-8 character within JSON syntax

Limitations of jQuery: onClick function not transferable

What is the method of generating an HTML tag solely using CSS?

Getting table data from a Django database and displaying it on an HTML page

Guide on dragging and dropping without losing the item, allowing for continuous drag and drop functionality

Contrasting views when viewing content on localhost versus accessing it over a network

Adding a see-through Bootstrap Navbar to a Fullpage.js website: A step-by-step guide

What is the best way to extract user input from a bootstrap search bar and integrate it into an ajax request to fetch information?

Please fill out and submit a form by clicking on a button in HTML

Is it time to ditch Internet Explorer for EDGE?

Python Selenium struggles to locate element via id

Tips for aligning slick slider and a div on the same line

Could it be that v-show does not function properly on elements that are not dynamic