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是正確的？