passing ruby arrays to javascript code (jquery) in a haml view in Ruby on Rails

Question

I am displaying Highcharts graph on a haml template using jQuery/javascript. Here is a snippet showing the standalone graph from the demo code in HighCharts site:

:javascript

  $(document).ready(function() {
    $("#tabs").tabs();
    new Highcharts.Chart({
      chart: {
        renderTo: 'volume_chart'
      },
      title: {
        text: 'Logarithmic axis demo'
      },
      xAxis: {
        tickInterval: 1
      },
      yAxis: {
        type: 'logarithmic',
        minorTickInterval: 0.1
      },
      tooltip: {
        headerFormat: '<b>{series.name}</b><br />',
        pointFormat: 'x = {point.x}, y = {point.y}'
      },
      series: [{            
        data: [1, 2, 4, 8, 16, 32, 64, 128, 256, 512],
        pointStart: 1
      }]
    });
  });

This works fine. Now I am trying to set the series data from a ruby/rails array in the show.html.haml file like so:

...
- data_array        = [1, 2, 4, 8, 16, 32, 64, 128, 256, 512]
...
:javascript

  $(document).ready(function() {
  ...
      series: [{            
        data: "#{data_array}",
        pointStart: 1
      }]
    });
  });

This gives me the following error:

undefined method `to_js' for [1, 2, 4, 8, 16, 32, 64, 128, 256, 512]:Array

How can I pass data_array from my ruby/rails code to the javascript/jquery code?

Appreciate any help.

Thanks.

Bharat

Abe Voelker · Accepted Answer · 2012-04-15 01:14:07Z

5

require 'json'

...

"#{data_array.to_json}"

answered Apr 15, 2012 at 1:14

Abe Voelker

31.9k14 gold badges85 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bharat Over a year ago

Thank you. I independently found the following: 1. Do not name this array "data" something as this will interfere with jQuery's remote data transfer mechanism. 2. Having renamed this array as "test_array" I could say what you have above, i.e. "#{test_array.to_json" or "#{test_array.inspect}" or just "#{test_array}", all of which work. I do appreciate your time.

gajewsky · Accepted Answer · 2016-09-28 12:12:33Z

0

Hey in HAML there is no need to use to_json

   :javascript
     $(document).ready(function() {
       ...
       series: [{            
         data: #{ruby_array},
         pointStart: 1
       }]
     });
    });

will perfectly work

answered Sep 28, 2016 at 12:12

gajewsky

978 bronze badges

Collectives™ on Stack Overflow

passing ruby arrays to javascript code (jquery) in a haml view in Ruby on Rails

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related