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:
1
| |
1 2 | |
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’>gem 'gon' # Put this in your Gemfile
</pre></td></tr></table></div>gon.last_three_users = User.order(name: :desc).limit(3)
</pre></td></tr></table></div>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>