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

我目前正在数据库内容视图中显示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"}]}

<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>

我希望它看起来像这样

---

您可以将

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"}]}'

然后

现在，您可以使用

用户

执行您想要的操作。选择一个卡片模板。然后在循环中创建卡片，如下所示：

{"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"}]}

<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>

您使用哪个UI框架？@ManUtopiK-我使用Ruby on Rails作为前端，php codeigniter作为后端Ruby on Rails是一种服务器端语言！？您的前端没有使用RubyonRails。正在使用Rails和php的MVC框架。我正在以.html.erb格式的视图中显示结果。这是否只会将用户名作为纯文本输出？我的意思是它不会显示为“用户名”：“山姆”？另外，我想将所有细节显示为卡片，类似于您在这里看到的，我尝试使用更新的代码，但它没有以卡片的形式输出，我仍然看到它一个接一个。此外，我在gem文件中包含了引导gem，并进行了捆绑安装