title: Rails: how to pass data from Ruby to Javascript
body: <p>I am using Rails 4. In one of my controllers, I make a call using HTTParty to get data from the last_fm API - The user specifies a city, and then I have constructed an html page so that the details of upcoming concerts in that city are displayed in a table (title, date, artists, etc).</p>
  
  <p>The next goal of my app is to map these concerts using the Google Maps API. I have managed to load up a map on the page and have the "city" parameter (specified by the user's search) be the location that the map automatically centers at. </p>
  
  <p>Since I got the Last_fm data through a Ruby HTTP method, I had to pass it to the Javascript map API code by using jQuery selectors to snatch up data from the html page. Essentially, in order to pass any data from Ruby (including parameters submitted by the user through forms and the last_fm API request/response), I need to put that code in the html (the 'view') and then use jQuery to get that data into javascript. I was fine using this method, but when I tried to write a function for passing more complex code from Ruby to Javascript, I hit a roadblock. </p>
  
  <p>Here is where I am stuck: 
  There is a line in my javascript file =: <code>console.log($("div.music_id"));</code>
  I also tried <code>console.log($("div.music_id").contents());</code>
  Both simply printed to the console <code>[object Object]</code>. 
  I am not sure why this is the case. I have many div.music_id elements on the page and I need to iterate through them in order to capture information from their child DOM nodes. I am not able to iterate through them because jQuery does not appear to be capturing the element as I hoped it would. I was hoping that it would produce an array of objects that I could then perform further jQuery selector methods on to refine my selection, but I am unable to do this. Thanks for your help. By the way, the code in my 'view' is here (note that it has embedded ruby): </p>
  
  <pre><code>&lt;h1&gt;Show data for city specified on previous page&lt;/h1&gt;
    &lt;% @events.each do |x| %&gt;
    &lt;div class="music_id" id=&lt;%= x["id"] %&gt;&gt;
      &lt;div class="venue"&gt;
        &lt;h3&gt;Event Venue:&lt;/h3&gt;
        &lt;p&gt;&lt;%= x["venue"]["name"] %&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="time"&gt;
        &lt;h3&gt;Date &amp; Time:&lt;/h3&gt;
        &lt;p&gt; &lt;%= x["startDate"] %&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="event_title"&gt;
        &lt;h3&gt;Title:&lt;/h3&gt;
        &lt;p&gt; &lt;%= x["title"] %&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="artists_playing"&gt;
        &lt;h3&gt;Artists playing:&lt;/h3&gt;
        &lt;% array = Array(x["artists"]["artist"]) %&gt;
        &lt;% array.each do |y| %&gt;
          &lt;%= array.index(y) + 1 %&gt;)
          &lt;%= y %&gt;
          &lt;br&gt;
        &lt;% end %&gt;
      &lt;/div&gt;
      &lt;hr&gt; 
    &lt;/div&gt;
  &lt;% end %&gt;
  </code></pre>
  
  <p>and @events refers to this code found in the controller (Ruby code): </p>
  
  <p>@event_list = self.class.get('<a href="http://ws.audioscrobbler.com/2.0/" rel="nofollow">http://ws.audioscrobbler.com/2.0/</a>', :query => {</p>
  
  <pre><code>:method =&gt; 'geo.getEvents',
  :location =&gt; params[:city],
  :format =&gt; 'json',
  :api_key =&gt; 'xxxxxxyyyyyyzzzzz'})
  @events = @event_list["events"]["event"]
  </code></pre>
  
  <p>This Ruby code inherits methods from HTTParty, which I require at the top of the controller. The view code presents the data fine, so the problem is that I unable to move it to the Javascript file. </p>
  
  <p>I am hoping for some advice regarding if there is a better way to pass info from Ruby to Javascript, or how I should do it. Thanks</p>