ruby哈希数组组织成一个不规则的html表

zz2j4svz 于 2021-09-29 发布在 Java

关注(0)|答案(2)|浏览(318)

我正在尝试使用ruby中json数组的数据生成一个html表，该数组当前包含5个哈希（可能最多20个哈希）。每个散列有30多个字段（日期、成本等）。我可以手工完成，但编码肯定会更优雅。
html表格是不规则的。第一列是标题，它将是散列键（例如“date”或“cost”），标题列右侧的字段将是一个循环，通过散列获得相应的值。我想到的最贴切的东西是财务报表，下面是一个例子：https://finance.yahoo.com/quote/aapl/financials?p=aapl
实现这一目标的最佳方式是什么？
最终html输出结果的伪代码如下（基于下面的json数组示例）：

<table>
  <tr>
    <th>Date</th>
    <td>2021-07-01</td>
    <td>2021-07-02</td>
  </tr>
  <tr>
    <th>Component Number</th>
    <td>ABC123</td>
    <td>XYZ789</td>
  </tr>
  <tr>
    <th>Cost</th>
    <td>1.0</td>
    <td>5.0</td>
  </tr>
</table>

json结构如下所示（此处仅限于2个哈希，但可能多达20个）。我目前有一个示例变量 @cf 使用httparty获取json数组。

[ {
  "date": "2021-07-01",
  "componentNumber": "ABC123",
  "cost": "1.0",
  "other": "test"
}, {
  "date": "2021-07-02",
  "componentNumber": "XYZ789",
  "cost": "5.0",
  "other": "test"
} ]

如果你需要更多的信息，请告诉我。谢谢

ruby sinatra html-table

来源：https://stackoverflow.com/questions/68322345/ruby-array-of-hashes-organized-into-an-irregular-html-table

2条答案

按热度按时间

ngynwnxp1#

可能不是最优的，但我最终使用了以下伪代码：

<table>
  <% @cf.first.each_with_index do |x,i| #loop through count of first hash, all hashes have same count in my case%>
  <tr>
    <th><%= fieldName %></th>

    <% @cf.each do |y| #loop the fields %>
    <td><%= y.values[i] %></td>

   ...

希望这有助于寻找这一特定问题的人。如果你有更好的解决办法，我很想听听！

赞(0）回复(0）举报 2021-09-29

vd8tlhqk2#

给定你的变量 @cf 包含散列，您可以按照以下示例在视图中构建表：

<table>
  <tr>
    <th>Date</th>
    <th>Component number</th>
    <th>Cost</th>
    <th>Other</th>
  </tr>
  <% @cf.each do |row| %>
    <tr>
      <td><%= row[:date] %></td>
      <td><%= row[:componentNumber] %></td>
      <td><%= row[:cost] %></td>
      <td><%= row[:other] %></td>
    </tr>
  <% end %>
</table>

生成的html如下所示：

<table>
  <tbody><tr>
    <th>Date</th>
    <th>Component number</th>
    <th>Cost</th>
    <th>Other</th>
  </tr>
    <tr>
      <td>2021-07-01</td>
      <td>ABC123</td>
      <td>1.0</td>
      <td>test</td>
    </tr>
    <tr>
      <td>2021-07-02</td>
      <td>XYZ789</td>
      <td>5.0</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

对于转置表

如果需要转置布局，可以调整控制器中的数据，从原始散列生成转置集表（数组），例如：

tmp = @cf.map { |h| h.values }
headers = ['Date', 'Component number', 'Cost', 'Other']
@transposed_with_headers = tmp.prepend(headers).transpose

这将返回以下数据结构：


# => [["Date", "2021-07-01", "2021-07-02"], ["Component number", "ABC123", "XYZ789"], ["Cost", "1.0", "5.0"], ["Other", "test", "test"]]

最终使用 @transposed_with_headers 从这个Angular 来看：

<table>
  <% @transposed_with_headers.each do |row| %>
    <tr>
      <th scope="row" style="text-align:left"><%= row[0] %></th>
      <% row[1..].each do |content| %>
        <td><%= content %></td>
      <% end %>
    </tr>
  <% end %>
</table>

这将生成以下html代码：

<table>
  <tbody>
    <tr>
      <th scope="row" style="text-align:left">Date</th>
      <td>2021-07-01</td>
      <td>2021-07-02</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left">Component number</th>
      <td>ABC123</td>
      <td>XYZ789</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left">Cost</th>
      <td>1.0</td>
      <td>5.0</td>
    </tr>
    <tr>
      <th scope="row" style="text-align:left">Other</th>
        <td>test</td>
        <td>test</td>
    </tr>
  </tbody>
</table>

赞(0）回复(0）举报 2021-09-29

我来回答

ruby哈希数组组织成一个不规则的html表

2条答案

对于转置表

相关问题

热门标签

最新问答