如何在 html.erb 文件 (Ruby) 中呈现 JSON 信息？答案

【问题标题】：How to present JSON information in a html.erb file (Ruby)?如何在 html.erb 文件 (Ruby) 中呈现 JSON 信息？
【发布时间】：2021-10-14 01:41:18
【问题描述】：

我是 Ruby/Rails 的新手，我的任务是让 Ruby 站点 (.html.erb) 看起来更好一些。要求的一件事是在网站上呈现信息，目前显示为 JSON，作为漂亮的 html。 html.erb的行如下：

<%= @buyer.generate_profile.inspect %><br>

并将其在网站上收到的信息显示为 JSON。我可以做些什么来解析 JSON 并使其使网站将信息显示为正确的 html？

【问题讨论】：

什么是@buyer.generate_profile？什么是“正确的 HTML”或“漂亮的 HTML”？您目前的问题非常模糊；我们对您的数据或您实际尝试使用它实现的目标几乎一无所知。
我将尝试解释更多。提供的行在网站上显示了这一点：{:xx=>{:xx=>xx, :xx=>0.0, :xx=>0.0}, :xx=>{:xx=>0.0, :xx=>0.0 , :xx=>0.0}, :xx=>{:xx=>0.0, :xx=>0.0, :xx=>0.0}, :xx=>0.0, :xx=>"xx"}。我把 xx's 用来隐藏机密信息。我想知道的是如何使它不显示JSON，而是像这样（逐行）：xx：0.0，然后在新的一行xx：00，这对于它呈现的每一条信息。由于这是我第一次看到这段代码，我想说@buyer.generate_profile 显示了关于inspect 的信息idk
有类似“JSON.stringify”的方法吗？
JSON.pretty_generate？ apidock.com/ruby/JSON/pretty_generate
{:xx=>{:xx=>xx, :xx=>0.0, :xx=>0.0},..... 是一个定义明确的结构，所以你真的知道数据的格式吗？如果是，那么你可以做各种事情来制作“漂亮的 HTML”，你真的只需要决定你想要它的外观，并相应地获取精确的数据！但如果它是未知结构的神秘 JSON 块，那么除了 pretty_generate 或类似的东西之外，您无能为力，并将其作为数据块留在页面上。

标签： ruby-on-rails json ruby

【解决方案1】：

您可能想查看JSON.pretty_generate。您可以在 code 块中显示结果，例如：

<%# If your data is a JSON string, convert it to a hash %>
<% hash = JSON.parse(@buyer.generate_profile) %>
<pre>
  <code>
    <%= JSON.pretty_generate(hash) %>
  </code>
</pre>

【讨论】：

【解决方案2】：

所以generate_profile 方法返回一个 Hash 对象并在其上调用 inspect 将在 Ruby 中创建 Hash 语法的字符串输出，因此结果看起来像您的评论。

如果您希望它看起来像 JSON，最简单的方法是使用像这样的 to_json 方法

<%= @buyer.generate_profile.to_json %>

但老实说，也好不到哪里去。即使您要研究可以用适当的换行符等方式呈现它的方法，也不会对它有太大的改进。

我建议您学习如何迭代 Hash 中的键和值，因为这将允许您创建一个自定义的 HTML 布局，它可以看起来像您想要的那样。

例如，我将向您展示如何根据评论中的数据创建一个简单的表格

<table>
  <thead>
  <tr>
    <th>Key</th>
    <th>XX</th>
    <th>YY</th>
    <th>ZZ</th>    
  </tr>
  </thead>
  <tbody>
  <% @buyer.generate_profile.each_pair do |key, sub_hash| %>
    <tr>
      <td><%= key %></td>
      <td><%= sub_hash[:xx] %></td>
      <td><%= sub_hash[:yy] %></td>
      <td><%= sub_hash[:zz] %></td>
    </tr>
  <% end %>
  </tbody>
</table>

这里的主要内容是使用each_pair，这是一种迭代哈希的每个键和值的方法。在您的情况下，听起来第一个哈希的值是子哈希，因此我使用 sub_hash 作为块参数。

从技术上讲，您也可以在子哈希上使用 each_pair，但我猜它们都有相同的键，这就是为什么我手动添加了 XX、YY、ZZ 的列和单元格以及 sub_hash[:xx]等。

一旦你掌握了迭代哈希和数组的工作原理，那么我建议你放弃表格设计，转而研究更现代的网页设计方法，如 Flex 和 CSS-Grid，但一次只做一件事 :)

【讨论】：