如何在视图（html页面）中将json响应显示为信息卡？

Question

我目前在我的数据库内容视图中显示一个 json 响应。但是，我想在我的 html 视图中以信息卡的形式呈现它。我应该怎么做？有代码库供参考吗？

在我看来，我在 html 上显示的 json 响应如下：

{"result":[{"id":"3","username":"Sam","password":"111"},{"id":"4","username":"Harshal","password":"1234"},{"id":"5","username":"Dev","password":"112"},{"id":"6","username":"Lam","password":"113"},{"id":"7","username":"Tim","password":"114"}]}

我希望它看起来像这样

https://bootsnipp.com/tags/card

Answer 1

您可以将JSON 转换为hash 或OpenStruct。我建议您将其转换为OpenStruct。然后就可以在视图中使用了。

users_json_string = '{"result":[{"id":"3","username":"Sam","password":"111"},{"id":"4","username":"Harshal","password":"1234"},{"id":"5","username":"Dev","password":"112"},{"id":"6","username":"Lam","password":"113"},{"id":"7","username":"Tim","password":"114"}]}'

然后

users = JSON.parse(users_json_string, object_class: OpenStruct)

现在您可以使用users 为所欲为。选择一张卡片模板。然后在循环中创建卡片，如下所示：

<div class="container">
  <div class="row">
    <% users.result.each do |user| %>
      <div class="col-sm-6 col-md-4 col-lg-3 mt-4">
        <div class="card">
          <div class="card-block">
              <h5 class="text-bold"><%= user.username %></h5>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>