Correctly formatting arrays in HTML - html

I'm currently scraping product information from a website and am attempting to output it into a table on a webpage.
I'm stuck because the only code that I can get to properly format as
ITEM
IMAGE
PRICE
Is clearly wrong, and ends up replicating the data many times.
The partially functioning code is:
<table>
<tr>
<% #items.each do |title| %>
<% #images.each do |image| %>
<% #prices.each do |price| %>
<br>
<td><%= title %></td>
<br>
<td><%= image %></td>
<br>
<td><%= price %></td></tr>
<br>
</table>
<% end %>
<% end %>
<% end %>
I've tried formatting the code like below, but it tends to drop the three sets of data down like
TITLE TITLE TITLE IMAGE IMAGE IMAGE PRICE PRICE PRICE.
in a variety of very incorrect ways.
<table>
<tr>
<td>
<% #items.each do |title| %>
<%= title %>
<% end %>
</td>
<br>
<td>
<% #images.each do |image| %>
<%= image %>
<% end %>
<br>
<td>
<% #prices.each do |price| %>
<%= price %>
<% end %>
</td>
<br>
</table>
Is anyone able to spot the mistake I'm making or know what I need to do to properly output this code? Do I need to show you any more code?

If you want to iterate over the three arrays together you need to zip them. This will enable you to render each triplet together (the first item with the first image and the first price; the second item with the second image and the second price; etc.):
<table>
<% #items.zip(#images, #prices).each do |title, image, price| %>
<tr>
<td><%= title %></td>
<td><%= image %></td>
<td><%= price %></td>
</tr>
<% end %>
</table>

Related

Unexpected list of items on #index

On my index page, I succeeded in listing all of my 'games' in a table, unfortunately, another list, that isn't part of my index.html.erb file code also appears, above my table.
I don't understand how this is possible as my html file doesn't contain any element at the place the list appears on the browser... If someone has an idea that would be very nice !
Here's a photo of what appears on the browser :
browser problem snapshot
Here's my index.html.erb code :
<div class="container full-height">
<div class="abs-center">
<table class="table">
<thead>
<tr>
<td colspan="6">GAMES</td>
</tr>
</thead>
<tbody>
<%= #games.reverse.each do |g| %>
<tr>
<td><%= g.id %></td>
<td><%= g.score_1 %></td>
<td><%= g.score_2 %></td>
<td><%= g.created_at %></td>
<td><%= link_to 'see game', game_path(g) %></td>
<td><%= link_to 'modify', edit_game_path(g) %></td>
</tr>
<% end %>
</tbody>
</table>
</div>
</div>
My game controller index method :
def index
#games = Game.all
end
Thanks a lot !
Remove = before <%= #games.reverse.each do |g| %>. = renders a result of an expression, in your case, it is each method, that returns the collection.
Must look as this <% #games.reverse.each do |g| %>

Equal distribution for table rows - HTML AND CSS

I just made a table and I have three records that I'm trying to display. It successfully displays the information but it crams it all in one row. When I want it to display over three rows. I'm doing something obvious wrong but I still need some help. Here is my code:
HTML
<table>
<tr>
<th>Name</th>
<th>Manage</th>
</tr>
<tr>
<% #assignments.each do |assignment| %>
<td><%= link_to assignment.name, account_assignment_path(assignment) %></td>
<td><%= link_to "Delete", account_assignment_path(assignment), method: :delete %></td>
<% end %>
</tr>
</table>
Screen Shot:
As you can see they all try to fit in one column. How can I fix this so they spread out?
I'm not familiar with the templating language you're using, but this is likely due to not including the <tr> element in your loop.
<table>
<tr>
<th>Name</th>
<th>Manage</th>
</tr>
<% #assignments.each do |assignment| %>
<tr>
<td><%= link_to assignment.name, account_assignment_path(assignment) %></td>
<td><%= link_to "Delete", account_assignment_path(assignment), method: :delete %></td>
</tr>
<% end %>
</table>

How to make an HTML table, which is automatically create new row after six item in column?

I'm trying to make my own site and I don't know how to better dispay images from database. I want to display six images in one row, but the next six item I want to display in second row. How can I make it with this code?
<table width="80%">
<% #products.each do |product| %>
<td>
<%= product.price %>"> <%= image_tag(product.image_url) %> </td>
<% end %>
</table>
Sorry, if this question is really stupid. But I'm just learning and It will help me understand Ruby better.
You could use Enumerable#each_slice to divide them into sub arrays like so:
<table width="80%">
<% #products.each_slice(6) do |row| %>
<tr>
<% row.each do |product| %>
<td><%= product.price %>"> <%= image_tag(product.image_url) %> </td>
<% end %>
</tr>
<% end %>
</table>

Show Ruby count result as html

I have created a custom method that will return unique items, together with the number of occurrences in a table. I have the following code:
#answers = Answer.all.count(:group => 'answer')
The result is fine when rendering it to JSON, showing:
{"0,0":1,"1,2":1,"2,2":1,"3,3":1}
...but I am unable to render the result to html. I can not display the key, values:
<% #answers.each do |answer| %>
<tr>
<td>key: <%= #answer.??? %></td>
<td>value: <%= #answer.??? %></td>
</tr>
<% end %>
If answers is a hash (and it looks like it is) you can pass the key and value into the rendering block by using two parameters instead of one.
like this:
<% #answers.each do |key, val| %>
<tr>
<td>key: <%= key %></td>
<td>value: <%= val %></td>
</tr>
<% end %>

Rails output a hash to html of x * y rows

I have a hash of images that i'd like to output via a html table.
It's a basic task that I've done in PHP but I'd like to see what magical stuff ruby can do to achieve it easily.
I've looked at helpers and tutorials and they're all very complicated.
Here's how I am currently printing the images.. How would I convert it to output to something like a 4 x n table?
<% #photos.each do |photo| %>
<%= image_tag photo["images"][4]["source"] %><br/>
<% end %>
Take a look at the each_slice method, which lets you grab your array in groups of a given size. You should be able to do something like
<table>
<% #photos.each_slice(4) do |group| %>
<tr>
<%group.each do |photo|%>
<td>
<%= image_tag photo["images"][4]["source"] %>
<td>
<% end %>
</tr>
<% end %>
</table>
I think in_groups_of might help you out:
<table>
<% #photos.in_groups_of(4, false) do |photos| %>
<tr>
<% photos.each do |photo| %>
<td><%= image_tag photo["images"][4]["source"] %></td>
<% end %>
</tr>
<% end %>
</table>
By passing false as the second argument, the last row might be incomplete. If you want to show a blank image instead, you can pass an empty photo object (assuming its URI points to the blank image your website is using) or simply the direct URI, if the photos array is only an array of URIs.