How can I modify the table structure in Ruby on Rails?

Greetings! I am a beginner in the world of Rails and could really use some assistance.

Below is the table data extracted from index.html.erb:

<table class="table">                         
 <thead>  
  <tr> 
    <th>Area</th> 
    <th>Item</th>
    <th>Year</th>
    <th>Value</th>
  </tr>
</thead>
<tbody>
  <%@a1s.each do |ada| %>
    <tr>
      <td><%=ada.Area%></td>
      <td><%=ada.Item%></td>
      <td><%=ada.Year%></td>
      <td><%=ada.Value%></td>
    </tr>
  <%end%> 
</tbody>
</table> 

index.html.erb

I am looking for guidance on how to transform the index.html.erb table into the example converted table below:

  1. Convert year data as headers and display their respective values.
  2. Show Item and Area names once, followed by the next country in the subsequent row.

example converted table

Answer №1

Display the year data in a header format along with their corresponding values.

If you want to retrieve a list of all years included in the data, you can achieve this by using:

@a1s.map(&:Year).uniq

The names of Items and Areas should be displayed, followed by the respective country in the next row.

I recommend utilizing .group_by to structure the data for each row within the table.

<%@a1s.group_by(&:Area).each do |area, adas_in_area| %>
  <%adas_in_area.group_by(&:Item).each do |item, adas_in_area_for_item| %>
    <tr>
      <td><%=area%></td>
      <td><%=item%></td>
      # TODO -- You need to determine the value for each year here :)
    </tr>
  <%end%>
<%end%> 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The MUI component with hideBackDrop={true} is preventing me from clicking outside of the Drawer component to close it

I implemented a Drawer component which opens when an icon on the Map is clicked. The drawer menu appears along with a backshadow that drops over the map. Interestingly, clicking on the map while the backshadow is displayed closes the drawer without any i ...

Ways to generate a unique link for every value in an option tag dynamically?

I'm currently working on a form that allows customers to buy an online service. Within the form, there's a dropdown list featuring 'select' and 'option' tags. This dropdown menu lets users pick a billing cycle (6 months, 1 ...

Is there a way to automatically transfer the ID from the first table to the id_position field in the second table upon clicking submit?

I'm dealing with two tables and I need to figure out how to add the id of the first table to the position_id field of the second table upon submitting. My request is done through ajax. The fields for the second table are dynamic, meaning you can keep ...

What is the best approach in Ruby for managing an unordered list with split columns and counting each

I am currently in the process of strategizing the layout for a webpage utilizing Bootstrap 4 within Ruby on Rails. Specifically, I need to create a sidebar submenu that can expand and collapse, feature bullet points, and include a counter. The desired out ...

What is the best way to apply an animation class to a modal upon clicking a button?

When I click the "x" button on the modal, I want the animation to occur. However, what currently happens is that the modal closes without the animation. Then, upon reopening the modal, the animation occurs without any clicking involved. Below is my curren ...

The sticky navbar fails to stay in place when the content becomes too lengthy

This is my current state of code (minified, for explanation only) index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w ...

Tips for submitting an e-mail through an HTML form with the help of Node.js and Gulp

Today, I've been tackling the challenge of creating an HTML contact form that can send an email using Node.js and Gulp. However, I'm struggling to find a solution. Using a relative path to a simple .PHP file doesn't seem to be working, so it ...

.value not showing correct data in JavaScript

I am attempting to retrieve the value entered by the user in an HTML input field. While I can display a fixed, predetermined value with ease, this is not my intention. My goal is for users to input a numerical value and for that value to be displayed/adj ...

The information displayed in the tooltip exceeds the capacity of the column

Is there a way to display data in a tooltip when a column contains long sentences due to width constraints? To achieve this, I have implemented a renderer function as shown below: { header: xppo.st('SDE_INCIDENT_DESCRIPTION1'), width: 1 ...

Transforming into a serialized division

I am working on creating a custom WISYWIG editor that generates a div with specific inner elements. The goal is to design the div (along with its inner structure), serialize it, store it in a database as a string or JSON format, and later insert it into th ...

Effortlessly automate clicking with JavaScript or HTML - learn how now!

Does anyone know how to automatically click a button on a page when it loads? I attempted using this JavaScript code, but it didn't work. <a href="javascript:Clickheretoprint()" id="print"> <script type="text/javascript"> $(document).rea ...

Transform JSON data into an HTML layout

I'm looking to design a structure that showcases JSON information using HTML div elements. For example, utilizing the h4 tag for headers, p tag for text descriptions, and img tag for images. Can anyone provide guidance on the most efficient approach ...

What is the best way to prevent handleSubmit from triggering a re-render when moved to a different

Just started experimenting with React and ran into an issue that I can't seem to find a solution for anywhere. I have a basic search form that interacts with an API. If an invalid value is returned, it displays an H3 element with an error message lik ...

Is the WordPress error message "wp_register_style was improperly called" showing up on

I am facing an issue while trying to incorporate this code into my initial Wordpress template. It seems that the libraries for Bootstrap and my custom styles are not functioning as expected. Here is the code snippet in question. Any insights would be great ...

What is the best way to assign a unique color to each circle?

Struggling to assign random colors to each circle in my canvas. Currently, they all have the same color that changes upon refresh. I'm aiming for unique colors on each circle but my attempts have been unsuccessful so far. Check out my code below: v ...

When HTML elements are unable to access functions defined in separate JS files

After successfully resolving the issue, I am still curious as to why the initial and second attempts did not work: The problem lay with an HTML element connected to an event (myFunction()): echo '<button class="btn remove-btn" onclick="myFunction( ...

Triggering animation with jQuery and CSS

I am working on a one-page site and I want to make a parallelogram disappear when a button is clicked for the next part. Currently, it is disappearing from right to left but I would like to change the direction to left to right. Additionally, I have a simi ...

Looking for an iframe that can adapt to varying content sizes and scale seamlessly with different screen dimensions?

I am new to advanced coding and currently working on my first responsive Wordpress site. I have a "Product Search" database/site that I'm trying to integrate into my website using an iFrame. I want the integration to look seamless without scroll bars ...

Choose an identifier from a CSS class

I've been experimenting with a code pen that I stumbled upon: http://codepen.io/surjithctly/pen/pLDwe When I encase the checkbox in a div with the class "mynav," it stops functioning as intended. How do I implement the specified styling for the check ...

Using a JavaScript loop to modify the color of the final character in a word

I am curious to find out how I can dynamically change the color of the last character of each word within a <p> tag using a Javascript loop. For example, I would like to alter the color of the "n" in "John", the "s" in "Jacques", the "r" in "Peter" ...