Passing Ruby Data to Javascript

Using more front-end APIs and frameworks, I’ve found it useful to be able to, at times, pass data from ruby to my Javascript files. The first time I ran into this problem was in Avoid, the NYC restaurant and health violations lookup tool I helped create. In this app, I used the Google Maps API to dynamically update the geographic coordinates of restaurants in bad shape on a google map. I found this diffucult to do as you can’t normally access Ruby data from Javascript. I’ve since found out a few ways to do so, and I’ll tell you about them now.

Data Attributes

One of the simplest ways to pass a very limited amount of data is to use a data attribute on an HTML tag. For example, if I wanted to pass a longitude and latitude from my rails app to Javascript by extracting it through the DOM with jQuery:

<span class="latlong" data-latitude="32.796283" data-longitude="-117.129574">Something that doesn't matter</span>
$(".latlong").data("latitude"); //= "32.796283"
$(".latlong").data("longitude"); //= "-117.129574"

As you can see, this is realatively simple and straight forward. It doesn’t matter what is inside whatever tag you have used to store your data, you’re just referencing the attributes of the tag itself. Also, it could be any type of tag. This is easy when the data you need to access isn’t an object, but it a more primative data type, or string.

Gon Gem

The Gon Gem is another way to do this, and it is generally more useful when you are trying to pass more complex data-types, such as objects. Very simply, just install Gon: <div class=’bogus-wrapper’>

<figcaption>Gemfile.rb</figcaption><div class=”highlight”><table><tr><td class=”gutter”><pre class=”line-numbers”>1 </pre></td><td class=’code’><pre>gem 'gon' # Put this in your Gemfile </pre></td></tr></table></div>
</div> Then, in your conroller, or really wherever in your app you want to store your data for Javascript use: <div class=’bogus-wrapper’>
<figcaption>Users_Controller.rb</figcaption><div class=”highlight”><table><tr><td class=”gutter”><pre class=”line-numbers”>1 </pre></td><td class=’code’><pre>gon.last_three_users = User.order(name: :desc).limit(3) </pre></td></tr></table></div>
</div> <div class=’bogus-wrapper’>
<figcaption>users.js</figcaption><div class=”highlight”><table><tr><td class=”gutter”><pre class=”line-numbers”>1 2 3 4 </pre></td><td class=’code’><pre>console.log("Welcome our three newest users!"); for( var i=0; i<gon.last_three_users.length; i++ ){ console.log(gon.last_three_users[i].name + "!"); } </pre></td></tr></table></div>
</div> Simple enough. That saves a lot of time and cleans up your views nicely. No more Javascript hanging out in .html.erb files.