将数据从控制器传递到Rails中的资产js

Question

I am using rails 5.I try to pass the data from controller (which is taken from sql query) to js file in assests. And I run the query from controller as

@sample = Sample.all  

I need to display data in fullcalendar events.
assets/js file

$('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'agendaDay,listWeek,agendaWeek,month'
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            defaultView: 'listWeek',
            navLinks: true,
            events: [
                <% @sample.each do |sample| %>
                {
                    title: '<%= sample.title %>',
                    start:  TODAY + 'T09:00:00',
                    description: '<%= sample.description %>'
                }
                <% end %>  

it didn't show the result in fullcalendar. How to pass it from controller to asset/js
Thanks much for quick response

Answer 1

A simple method is to place a partial in layouts/_variables.html.erb , then render it in a <script> tag in your application layout.

For example:

<script>    
  _app.samples = [
  <% @sample.each do |sample| %>
       {
         title: '<%= sample.title %>',
         start:  TODAY + 'T09:00:00',
         description: '<%= sample.description %>'
      }
  <% end %>  
  ];
</script>

Then inside your original calendar, just use the generated Javascript directly:

  $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaDay,listWeek,agendaWeek,month'
        },
        editable: true,
        eventLimit: true, // allow "more" link when too many events
        defaultView: 'listWeek',
        navLinks: true,
        events: _app.samples,

In layouts/application.html.erb

</script>
  <%= render partial: "layouts/_variables" %>
  <%= csrf_meta_tags %>
  ...

It has the benefit that you do not need to pollute you Javascript assets with Rails code, and data is updated on every page refresh without extra round-trips to the server.

The disadvantage is that you need to consider Ajax requests separately (although that is a whole different question), and should take care to place these variables in an app specific structure so as not to pollute your global space with random variables.

Answer 2

You can use gon gem for this problem, like the below example:

in controller file:

gon.user_id = @user.id

in js file:

console.log(gon.user_id);

" Gon gem — get your Rails variables in your js. If you need to send some data to your js files and you don't want to do this with long way through views and parsing - use this force! "

For more info:

https://github.com/gazay/gon