Rails：如何将数据从Ruby传递到Javascript

Question

我正在使用Rails4。在我的一个控制器中，我使用HTTParty进行调用以从last_fm API中获取数据-用户指定了一个城市，然后我构建了一个html页面，以便该城市即将举行的音乐会的详细信息在表格中显示（标题，日期，艺术家等）。

我的应用程序的下一个目标是使用Google Maps API映射这些音乐会。 我设法在页面上加载了地图，并将“ city”参数（由用户的搜索指定）作为地图自动居中的位置。

由于我是通过Ruby HTTP方法获取Last_fm数据的，因此我不得不使用jQuery选择器将其传递给Javascript Map API代码，以从html页面中获取数据。 本质上，为了传递来自Ruby的任何数据（包括用户通过表单和last_fm API请求/响应提交的参数），我需要将该代码放入html（“视图”）中，然后使用jQuery来获取数据导入javascript。 我使用这种方法很好，但是当我尝试编写一个将更复杂的代码从Ruby传递到Javascript的函数时，遇到了障碍。

这是我遇到的问题：我的javascript文件中有一行=： console.log($("div.music_id")); 我也尝试过console.log($("div.music_id").contents()); 两者都简单地打印到控制台[object Object] 。 我不知道为什么会这样。 我的页面上有很多div.music_id元素，我需要遍历它们以便从其子DOM节点捕获信息。 我无法遍历它们，因为jQuery似乎并没有像我希望的那样捕获元素。 我希望它会产生一组对象，然后可以对它们执行进一步的jQuery选择器方法以优化选择，但是我无法做到这一点。 谢谢你的帮助。 顺便说一句，我的“视图”中的代码在这里（请注意，它已嵌入红宝石）：

<h1>Show data for city specified on previous page</h1>
  <% @events.each do |x| %>
  <div class="music_id" id=<%= x["id"] %>>
    <div class="venue">
      <h3>Event Venue:</h3>
      <p><%= x["venue"]["name"] %></p>
    </div>
    <div class="time">
      <h3>Date & Time:</h3>
      <p> <%= x["startDate"] %></p>
    </div>
    <div class="event_title">
      <h3>Title:</h3>
      <p> <%= x["title"] %></p>
    </div>
    <div class="artists_playing">
      <h3>Artists playing:</h3>
      <% array = Array(x["artists"]["artist"]) %>
      <% array.each do |y| %>
        <%= array.index(y) + 1 %>)
        <%= y %>
        <br>
      <% end %>
    </div>
    <hr> 
  </div>
<% end %>

@events引用在控制器中找到的以下代码（Ruby代码）：

@event_list = self.class.get（' http://ws.audioscrobbler.com/2.0/'，：query => {

:method => 'geo.getEvents',
:location => params[:city],
:format => 'json',
:api_key => 'xxxxxxyyyyyyzzzzz'})
@events = @event_list["events"]["event"]

这段Ruby代码继承了HTTParty的方法，我在控制器顶部需要它。 视图代码可以很好地显示数据，因此问题是我无法将其移至Javascript文件。

我希望就是否有更好的方法将信息从Ruby传递到Javascript或应该如何做提供一些建议。 谢谢

Answer 1

我认为您的问题是您应该将json与数组一起使用。 尝试使用array.to_json 。 如何使用JavaScript解析Ruby JSON字符串

一旦转换为json，它应该是可迭代的。

Answer 2

尝试使用gon宝石。 瑞安·贝茨（Ryan bates）显示了如何使用此方法，并提供了将红宝石对象传递给javascript的其他选项：

http://railscasts.com/episodes/324-passing-data-to-javascript

顺便说一句，您是否尝试过使用inspect元素来确保插入到元素中的id是正确的？