如何在html.erb文件(Ruby)中显示JSON信息？

在HTML.erb（Embedded Ruby）文件中显示JSON信息，通常涉及到将Ruby中的数据结构转换为JSON格式，并嵌入到HTML模板中。以下是实现这一功能的步骤：

基础概念

ERB（Embedded Ruby）：ERB是一种Ruby的模板语言，允许在HTML文件中嵌入Ruby代码。
JSON（JavaScript Object Notation）：JSON是一种轻量级的数据交换格式，易于人阅读和编写，也易于机器解析和生成。

类型

简单JSON显示：直接将JSON数据转换为字符串显示在页面上。
结构化JSON显示：将JSON数据解析为Ruby对象，遍历并显示其中的各个字段。

应用场景

API响应展示：将后端API返回的JSON数据展示在前端页面上。
动态内容生成：根据JSON数据动态生成HTML内容，如表格、列表等。

示例代码

假设我们有一个包含用户信息的JSON数据，我们希望在HTML页面上显示这些信息。

Ruby控制器代码

# app/controllers/users_controller.rb
class UsersController < ApplicationController
  def index
    @users = [
      { id: 1, name: 'Alice', email: 'alice@example.com' },
      { id: 2, name: 'Bob', email: 'bob@example.com' }
    ]
  end
end

HTML.erb文件代码

<!-- app/views/users/index.html.erb -->
<!DOCTYPE html>
<html>
<head>
  <title>User List</title>
</head>
<body>
  <h1>User List</h1>
  <ul>
    <% @users.each do |user| %>
      <li>
        <strong>ID:</strong> <%= user[:id] %> |
        <strong>Name:</strong> <%= user[:name] %> |
        <strong>Email:</strong> <%= user[:email] %>
      </li>
    <% end %>
  </ul>
</body>
</html>

遇到的问题及解决方法

问题：JSON数据无法正确显示

原因：可能是JSON数据格式不正确，或者在ERB模板中解析有误。

解决方法：

检查JSON数据格式：确保JSON数据格式正确，可以使用在线JSON验证工具进行检查。
调试ERB模板：在ERB模板中添加调试信息，如<%= debug @users %>，查看数据是否正确传递到模板中。

示例调试代码

<!-- app/views/users/index.html.erb -->
<!DOCTYPE html>
<html>
<head>
  <title>User List</title>
</head>
<body>
  <h1>User List</h1>
  <%= debug @users %> <!-- 调试信息 -->
  <ul>
    <% @users.each do |user| %>
      <li>
        <strong>ID:</strong> <%= user[:id] %> |
        <strong>Name:</strong> <%= user[:name] %> |
        <strong>Email:</strong> <%= user[:email] %>
      </li>
    <% end %>
  </ul>
</body>
</html>