Dynamic display of an array of hashes in a html table?

Question

I have a database called "products" that has a field that uses hstore called data.

At the moment, in my index.html.haml, I'm just looping through products and displaying their data as a hash:

- @products.each do |product|
  =product.data #THIS PRINTS A HASH
  %hr

Which, for example, could print a hash like:

{"Name"=>"Example","type"=>"book", "price"=>"7.99"}

I'd like to make a HTML table that could hold a dynamic number of keys and values, and print them into columns with values corresponding to keys. Here's a diagram:

enter image description here

Thanks for all help!

MrYoshiji · Accepted Answer · 2013-10-11 18:39:39Z

5

Hope this can help:

Solution 1: based on same .data content # Deprecated

Conditions:

All product.data have the same amount of pairs of key/value.
The order of the pairs is the same for all the products.

The code:

# headers
%tr
  - @products.first.data.keys.each do |attribute_name|
    %th= attribute_name
# body
- @products.each do |product|
  %tr
    - product.data.attributes.each do |attribute_value|
      %td= attribute_value

This code will render properly if each product.data has the same amount of key/value pairs AND stored in the same order.

Solution 2: fully dynamic (.data varying) # Recommended

Conditions:

The number of pairs (of key/val) of product.data is varying between each product
The order of the pairs is not the same for all the products.

The code:

# we gather all possible attribute's name in the data hash:
- headers = @products.map(&:data).flat_map(&:keys).uniq

%tr 
  # we make a table-head cell for each attribute's name:
  - headers.each do |key|
    %th= key

- @products.each do |product|
  %tr # for each attribute's name, we display a TD cell and try to display it's value if exists
    - headers.each do |key|
      %td= product.data[key]

Feel free to ask for details, I feel like I just gave you a piece of code without any explanation...

edited Oct 11, 2013 at 18:39

answered Oct 11, 2013 at 16:38

MrYoshiji

54.9k13 gold badges130 silver badges120 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

infinity Over a year ago

Thanks so much for the answer! Its possible that product.data won't always have the same amount of key/value pairs. Could you post the code?

infinity Over a year ago

Thanks so much! I just googled flat_map(), so thank you as well for introducing me to a new function!

Collectives™ on Stack Overflow

Dynamic display of an array of hashes in a html table?

1 Answer 1

Solution 1: based on same .data content # Deprecated

Solution 2: fully dynamic (.data varying) # Recommended

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution 1: based on same .data content # Deprecated

Solution 2: fully dynamic (.data varying) # Recommended

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related