Pass Jbuilder to gon

November 21, 2019

Sometimes in rails you have to pass data from your controller to vanilla JavaScript or ReactJs. This is where gon comes in! It makes it very easy to share rails objects with JavaScript. Gon out of the box works great for simple objects, but you do not want to build complex objects a controller. You should always keep your controller thin.

One way to create complex objects in a controller that is to be shared with Javascript, is to use jbuilder to build the object, and gon has provided a simple way to do so:

app/controller/example_controller.rb

class ExampleController < ApplicationController
  def index
    @name = 'hello world'
    gon.jbuilder template: 'app/views/example.json.jbuilder', as: :example
  end
end

Do not forget to add render_gon to your view. It is a simple step that is typically missed. app/views/example/index.html.erb

<%= render_gon %>

Here is an example on how to build a json response using jbuilder. This example is very simple, but you can replace it with a complex object you want:

# app/views/example.json.jbuilder
json.example @name

The last part is simple use it in your JavaScript:

gon.example.name

Search