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

Using jQuery to dynamically add or remove CSS classes to an element based on the selected radio button

Currently, I am attempting to utilize localstorage to save a class based on the selected radio button. Essentially, when the second radio button is clicked with the data-color attribute "color2", the goal is to apply that data as a class to the .box elemen ...

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

My webpage contains a div element positioned in the middle of the content, with its height being adjustable through JavaScript code. I am seeking a way to manage the scrolling behavior when the height of the div changes. Specifically, I want the content t ...

Setting character limits within textareas based on CSS classes in a dynamic manner

I'm looking to develop a JavaScript function that can set text limits for multiple textareas at once using a class, allowing for flexibility in case specific textareas need to be exempt. However, I'm facing issues with my debuggers - Visual Studi ...

CSS guidelines for layering shapes and divs

Currently, I am in the process of developing a screenshot application to enhance my understanding of HTML, CSS, and Electron. One of the key features I have implemented is a toggleable overlay consisting of a 0.25 opacity transparent box that covers the en ...

Utilizing Dojo widgets in Xpages

I'm having trouble applying CSS to certain dojo elements within my Xpage. Here is the CSS style sheet I am using: .formFields { color: rgb(5, 56, 107); font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-variant: nor ...

Invoking functions with JavaScript objects

Can anyone help me figure out what is wrong with the following JavaScript code? <form> What is 5 + 5?: <input type ="number" id ="num_answer;"/> </form> <script> function basic_math(){ var num_val = document.getElem ...

Incorporate validation features within a jQuery method

I am struggling with some HTML and jQuery code that generates links based on user input. HTML <input type="text" id="text" placeholder="Enter text" autofocus /> <a id="link1" class="btn btn-info" href="#" target="_blank"> Search 1 </a> ...

Attach two divs to the top-right and bottom-left corners using adhesive

Currently, I am utilizing jQuery's resizable() function. My goal is to have one div positioned on the top-right corner and another div on the bottom-left corner at all times. Essentially, I want these two divs to act as if they were the resizable hand ...

Dealing with HTML and Escaping Challenges in jQuery Functions

Here is a string I have: var items = "<div class='item'><div class='item-img' style='background-image: url('images.123.jpg')'></div></div>" I am looking to update the inner HTML of a div: $ ...

What is the best method for extracting individual JSON objects from a response object and presenting them in a table using Angular?

After receiving a JSON Array as a response Object from my Java application, I aim to extract each object and display it on the corresponding HTML page using TypeScript in Angular. list-user.component.ts import { HttpClient } from '@angular/common/h ...

Seeking out all (including potentially relative) URLs on a webpage: Possible strategies to consider

For a coding challenge, I am working on a small python tool to download an entire website locally. In order to view the website offline, I need to convert all URLs to relative URLs. This is necessary to ensure that resource files (such as .js and .css) are ...

What is the best way to implement a CSS rule that is influenced by the number of siblings present within an element?

Is there a way to style an element differently based on the number of subelements it contains? <div class="wrapper"> <div class="element" /> </div> or... <div class="wrapper"> <div class="element" /> <div class="el ...

exploring div element(s) with jQuery

My HTML page contains multiple div elements in the body. I have also included buttons with associated click functions in jQuery to change the background-color of a div element based on the button pressed. However, I'm facing an issue at the 'term ...

Remove all Visual Composer Shortcodes while preserving the content

I'm in the process of transferring 200 posts from a previous WordPress website, which contain numerous visual composer shortcodes within the content. Is there a method to remove all the shortcodes and retain the content? ...

Styling a Pie or Doughnut Chart with CSS

I am working on creating a doughnut chart with rounded segments using Recharts, and I want it to end up looking similar to this: Although I have come close to achieving the desired result, I am encountering some issues: Firstly, the first segment is over ...

ng-bootstrap dropdown menu not responding to click events

I recently implemented a button dropdown menu, which I directly borrowed from this ng-bootstrap example. Although the dropdown functionality is working fine, I encountered an issue when trying to add a click handler to the dropdown buttons. Despite my eff ...

Difficulty in processing Json output in Ruby

@response = Typhoeus::Request.get(LOCATION_API_SERVER_ADDRESS+'search?ll=' + current_user.altitude.to_s + "&query="+ params[:query] + LOCATION_API_ACCESS_CODE) @venues = ActiveSupport::JSON.decode(@response.body) @venues['response& ...

Troubleshooting issue with Onchange in select HTML element within Django

I'm working with a Problems model in my project. In my Models file models.py class Problems(models.Model): Easy = 'Easy' Medium = 'Medium' Hard = 'Hard' NA = 'NA' DIFFICULTY = [ (NA ...

Troubleshooting issue: Click function not responding inside Bootstrap modal

Below is the JavaScript code for my click function $(".addPizza").on("click", function(event) { event.preventDefault(); console.log("hello") let userId = $("#userId").attr("data-id"); let pizzaRecipe = $('#pizza-recipe').val().trim(); ...

Using a responsive menu (mmenu) can lead to an increase in Cumulative Layout

I've implemented mmenu as a responsive menu on my website. Recently, I discovered errors in Google's search console related to high CLS (Cumulative Layout Shift). Upon further investigation, I noticed that when loading my page in "slow" mode for ...