html_safe is not working in rails to javascript

Question

I have an array of strings declared in my controller that I need to use in a js file. Here is my code:

#controller
@cars = current_user.cars.completed.collect{|c| c.name.titleize }
puts "#{@cars.inspect}"

The puts returns:

["Presentation 2", "Presentation 1"]

I now need to use the array in javascript, so I do:

//javascript
var lineChartData = {
    labels : <%= @cars %> 
}

The javascript is not working though because the browser is reading it as:

//javascruot
var lineChartData = {
    labels : ["Presentation 2", "Presentation 1"], 
}

I have tried using html_safe like this:

#controller
@cars = current_user.cars.completed.collect{|c| c.name.titleize.html_safe }
puts "#{@cars.inspect}"

but it has no effect. How do I get the quotes to work properly?

Answer 1

Although I don't advise to inject Ruby variables into JavaScript directly using the OutputSafetyHelper#raw works:

//javascript
var lineChartData = {
  labels : <%= raw @cars %> 
}

I suggest to embed those Strings into HTML and fetch them with JavaScript.

Answer 2

I would use to_json:

//javascript
var lineChartData = {
    labels : <%== @cars.to_json %> 
}

Answer 3

It seems like you're generating a JS view using ERB. I would recommend not mixing ERB with JS like this. Try using a tool like Gon which allows you to set the variable onto a Ruby object in the controller, and allows you to reference the data in your JS using a Javascript object. The advantage to this approach is that you can write pure JS and keep it in the assets directory. Then you can take advantage of the asset pipeline: minimizing, uglifying, coffee script, etc. Pure JS in the assets directory is also more easily tested using a JS testing framework like Jasmine.