Ruby array to HTML table

Question

I'm trying to figure out a way to take a Ruby array and create an HTML table. The array is dynamic, its contents change depending on user options and inputs so the HTML tables also need to be dynamic.

The array look something like this:

array = [[a, 1, 2 ,3], [a, 1, 2 ,3], [a, 1, 2 ,3], [b, 1, 2 ,3], [b, 1, 2 ,3], [b, 1, 2 ,3], [c, 1, 2 ,3]]

What I would like to do is first group or split the array in the following way (though this might not be necessary, I don't know).

array1 = [[a, 1, 2 ,3], [a, 1, 2 ,3], [a, 1, 2 ,3]]
array2 = [[b, 1, 2 ,3], [b, 1, 2 ,3], [b, 1, 2 ,3]]
array3 = [[c, 1, 2 ,3]]

Then outputting each of the new arrays in a separate HTML tables, where a, b, c could be like a header/title and then sub element would be a new row to the that table. In short I'd like to be able to control where each element is placed in the table.

I know my description probably isn't too clear but this is way beyond my very limited skill set and even difficult to explain what I want to achieve. :)

edit: here's my attemp at visualizing what I'm trying to accomplish... html output result

Perhaps give an example of the resulting table layout for the given array so we can better understand your desired end result? Also, are you using Rails? — Andrew Marshall, Mar 17 '12 at 18:15
@Sergio, other then creating the array I haven't done much else. I'm actually learning as I go and trying to figure out a way to accomplish the result I want. If you look at some of my other questions you'll notice that I keep trying different things which so far haven't been very good. :) @ Andrew, no I'm not using rails... to be honest I'm not even sure what that is. I'll upload a screenshot of what I'm trying to do... thank you both. :) — JoMojo, Mar 17 '12 at 18:25
@FrankN: fair enough. Perhaps, you can improve your question so that it conforms [to these guidelines](http://msmvps.com/blogs/jon_skeet/archive/2010/08/29/writing-the-perfect-question.aspx). — Sergio Tulentsev, Mar 17 '12 at 18:28
@Sergio, thanks for the link, I realize my question isn't very clear. SOmetimes trying to put into words what it is I want is difficlut since I don't know the lingo and all that good stuff. :) I'll try and inprove it... — JoMojo, Mar 17 '12 at 18:33
You are probably looking for enum.each_slice to split the array this way http://stackoverflow.com/questions/3477775/converting-ruby-array-to-array-of-consecutive-pairs — Simon Perepelitsa, Mar 17 '12 at 18:37
@FrankN, there's a Russian saying: "who thinks clearly - explains clearly". :) Find a 5-year-old and explain your question to him. Chances are that you'll find an answer in the process :) — Sergio Tulentsev, Mar 17 '12 at 18:39
@Sergio, LOL I totally agree! Hell right now I think a 5 year old would be able to accomplish more then I can. ;) — JoMojo, Mar 17 '12 at 18:44
@Andrew, I looked into Rails and for what I'm working with I can't use rails just ruby. — JoMojo, Mar 17 '12 at 18:56
@FrankN: here's what I would do: I'd code that table in HTML, manually. After this, I would probably have some thoughts about the implementation. (I assume you know how to print strings to console or file.) — Sergio Tulentsev, Mar 17 '12 at 19:02
@Sergio, yes That I know how to do. :) As far as coding the table manually, how would I make it dynamic so that it adds rows depending on how many elements match a, b, c... for example? Here's a link that might give some more insight as to what I'm working with... [link](http://www.martinrinehart.com/models/tutorial/tutorial_ar.html) — JoMojo, Mar 17 '12 at 19:10
@SergioTulentsev [Rubber duck/child problem solving](http://www.codinghorror.com/blog/2012/03/rubber-duck-problem-solving.html)? — Andrew Marshall, Mar 17 '12 at 19:11
I'm definitively a Rubber Duck on this one! :) Sorry, I should of put more thought into the question. Note to self never ask a wuestion out of frustration! ;) — JoMojo, Mar 17 '12 at 19:17

score 3 · Accepted Answer · answered Mar 18 '12 at 14:23

3

more or less stateless :-)

a = [["a", 1, 2 ,3], ["a", 1, 2 ,3], ["a", 1, 2 ,3],
     ["b", 1, 2 ,3], ["b", 1, 2 ,3], ["b", 1, 2 ,3], ["c", 1, 2 ,3]]

grouped = a.group_by{|t| t[0]}.values
header = "<tr><td>Name</td> <td>Length</td> <td>Width</td> <td>Depth</td> </tr>"
table = grouped.map do |portion|
  "<table>\n" << header << "\n<tr>" << portion.map do |column|
    "<td>" << column.map do |element|
      element.to_s
    end.join("</td><td>") << "</td>"
  end.join("</tr>\n<tr>") << "</tr>\n</table>\n"
end.join("\n")
puts table

answered Mar 18 '12 at 14:23

Reactormonk

21,472
14
74
123

Thanks for the replies Tass and Boris, sorry I didn't have time before tonight to give this a try. But when I run the code i get... Error: #>. Any idea why? – JoMojo Mar 20 '12 at 23:15
I set Tass's answer as accepted just because it was a cleaned up verion of Boris's... but in all fairness Boris's works also... so thank you both. :) – JoMojo Mar 22 '12 at 00:54

score 1 · Answer 2 · answered Mar 17 '12 at 19:15

Here is my code that tries to achieve what you want:

a = [["a", 1, 2 ,3], ["a", 1, 2 ,3], ["a", 1, 2 ,3],
     ["b", 1, 2 ,3], ["b", 1, 2 ,3], ["b", 1, 2 ,3], ["c", 1, 2 ,3]]
grouped = a.group_by{|t| t[0]}.values
header = "<tr><td>Name</td> <td>Length</td> <td>Width</td> <td>Depth</td> </tr>"
for portion in grouped
    str = "<table>\n" + header + "\n"
    for line in portion
        str += "<tr>"
        for element in line
            str += "<td>" + element.to_s + "</td>"
        end
        str += "</tr>\n"
    end
    str += "</table>\n"
    puts str
end

It is not the most beautiful ruby, but at least produces tables that look like that: enter image description here

Note that this is an image screen shot of an html in which I include the output tables. From now on you will need only to style them a bit.

Nice :). Still if you allow me to cite myself: "It is not the most beautiful ruby". I also have not seen ruby in a while, but as long as noone else wants to answer... I wouldn't mind if you translate my code to modern ruby — Boris Strandjev, Mar 18 '12 at 11:48

Ruby array to HTML table

2 Answers2