Gon Gem

We’ve started project mode this week and it’s been pretty cool building our own apps without any tests to pass, and solve real world problems with our application. I’ve learned a lot of new things and one of them new gems I learned to make my life easier is the Gon Gem!

Why Use Gon?

Gon is a ruby gem that you can use to send some data to your javascript files without getting it from your views and parsing it. It’s quick and easy and will save you a lot of time trying to connect the path from getting it to your javascript file. YOu can renew data in your variables through ajax with gon.watch, and it also supports Jbuilder, Rabl, and Rabl-Rails. You can learn more about Gon by click on the link above.

How I encountered the problem

While I was working on our project on using the foursquare API to find the BEST places to eat – not just random restaurants around you, but venues that people keep going back to, I encountered the problem of parsing jSON from the Geonames API. In my javascript file, I was trying to display the location of your city and zipcode, by using the longitude and latitude of your current location. But before I can even parse it, I have to put in my username for the API and since I didn’t want hackers on github to hack my API key, I wanted to put it in the figaro file, which loads its values to ENV and puts it in .gitignore. I wanted to access my API key from my ENV and put it to my javascript file, but it was really hard to.

Initial efforts

Maybe we can just pull the ENV into a variable! WRONG

1

var username = ENV['geonames_username']

Maybe we need to interpolate it, this is from a ruby file, afterall. I changed the searches.js file into searches.js.erb so I can write ruby in it. In my file, I tried to set the api key to a variable username. WRONG

1

var username = <%= ENV['geonames_username'] %>

Then I tried to concatenate it into my API link to parse. WRONG

1

var link = "http://api.geonames.org/findNearestAddressJSON?lat=" + latitude + "&lng=" + longitude + "&username=" + username

Apparently, that still gave me nothing. my var username was just an empty string, which resuilted in a bad API link.

Here is where the Gon Gem came in. One of our instructors, Sophie, recommended this gem, which made it much easier to access data to my javascript file, because I was not able to get data from the ENV. It was pretty simple to set up also.

With the Gon Gem

In your Gemfile, you will add the gem

1

gem 'gon'

Then you will bundle install to install the gem into your computer. If you haven’t already, add the api key to your application.yml from your figaro gem, like you usually would for regular ruby. Make sure it is in single quotes ‘’ and not double quotes “ ”, I made the mistake of using double quotes and it was not taken well when you ask for it in your model when you do ENV[‘api_key’].

To access it in your javascript file, go to the controller where you are trying to use the api key on that page and define it so your js file can grab it from the controller.

1
2
3
4

def index
  @search = Search.new
  gon.username = ENV['geonames_username']
end

In your javascript file, you can set the variable username to gon.username

1

var username = gon.username

Now this will work and you can continue parsing your data efficiently!

1

var link = "http://api.geonames.org/findNearestAddressJSON?lat=" + latitude + "&lng=" + longitude + "&username=" + username

The Gon gem has been useful to me. Although this was a relatively easy problem to fix, there are probably other harder and deeper problems you can use it with that is best suited for this gem. For more information the typical uses and what you can use it with, you can go here! Gon gem