how can I convert ruby data structures to javascript data structures with .js.erb?

Question

I have a .js.erb template and I am doing:

var foo = <%= [1,2,3] %>;
var foo2 = <%= [1,2,3].to_json %>;
var foo3 = <%= ["bar"].to_json %>;
var foo4 = <%= {:foo => "bar"}.to_json %>;

foo equals 123

foo2 equals [1,2,3]

foo3 is undefined (because the browser complains of a parse error)

foo4 is undefined (because the browser complains of a parse error)

The only way I could figure out how to get foo3 to work was to do:

var foo3 = "<%= ['bar'].to_json %>";    # foo3 => "[&quot;bar&quot;]"
foo3.replace(/&quot;/g, "\""))          # => "['bar']"  <-- looks like eval should work...
eval(foo3.replace(/&quot;/g, "\""))[0]; # => "bar" ... it works

I could not foo4 to work in this way... I tried doing:

var foo4 = <%= "{:foo => 'bar'}.to_json" %>;  # foo4 => "{&quot;foo:&quot;:&quot;bar&quot;}" %>;
foo4.replace(/&quot;/g, "\""));               # => "{"foo":"bar"}"  <-- looks like eval should work
eval(foo4.replace(/&quot;/g, "\""));           # => "Parse error"   <-- but it doesn't...

Bottom line, all this needing to use eval stuff is ridiculous-- there MUST be a better way! Can someone please enlighten me as to what it is?!?!

foo.to_json is the right way. Please show us what foo.to_json is being converted to in the js source. — Larry K
– Larry K, Commented Oct 18, 2011 at 16:19
If I do var foo = <%= [1,2,3].to_json %>, it works.. Inspecting foo shows a js array [1,2,3]... but If I do var foo = ["a", "b", "c"].to_json %> it says "Parse error" when I load the page and foo is undefined. — patrick
– patrick, Commented Oct 19, 2011 at 4:11
Please edit your question to add the additional info. And show us what the Javascript is as a result of the Ruby js erb file. You're just telling us "parse error" on the browser--we want to see what could not be parsed--look in the js file. — Larry K
– Larry K, Commented Oct 19, 2011 at 19:12

patrick · Accepted Answer · 2011-10-19 23:08:53Z

20

The problem was .to_json ecapes the html entities!

The solution was to do:

var foo = <%= {:lol => ["lmaonade", "rotflcopter"]}.to_json.html_safe } %>

This gives me:

{"lol": ["lmaonade", "rotflcopter"]}

answered Oct 19, 2011 at 23:08

patrick

9,81414 gold badges66 silver badges127 bronze badges

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

1 Comment

radiospiel Over a year ago

Well, it is not .to_json escaping html entities, it is erb which does that. And yes, .to_html is the way to go (even though I sometimes prefer to use raw, as in <%= raw {:lol => ["lmaonade", "rotflcopter"]}.to_json } %>

Teddy · Accepted Answer · 2011-10-18 16:29:54Z

0

If you need to handle when @foo is nil, try this:

var foo = <%= (@foo.kind_of?(Array) ? $foo : [] ).to_json %>;

Converting a Ruby hash to a Javascript object is done like this:

<% hash = {:foo=>'bar'} %>
var js_hash = <%= hash.to_json %>;

answered Oct 18, 2011 at 16:29

Teddy

18.6k4 gold badges33 silver badges43 bronze badges

1 Comment

rewritten Over a year ago

Instead of an if you can just splat-wrap in an array: var foo = <%= [*@foo].to_json %>;

Collectives™ on Stack Overflow

how can I convert ruby data structures to javascript data structures with .js.erb?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related