how to render Ruby array as JavaScript array in ERB template

Question

I need to render a Ruby array in a very specific format for an erb template. This is because I am using JQcloud to build word clouds using JQuery, and is apparently picky about array formatting.

Here is the way that JQcloud requires a JS array to be formatted:

var word_array = [
          {text: "Lorem", weight: 15},
          {text: "Ipsum", weight: 9},
          {text: "Dolor", weight: 6},
          {text: "Sit", weight: 7},
          {text: "Amet", weight: 5}
          // ...as many words as you want
      ];

So what I have created in my controller are two arrays, one array of words to build my cloud, and another array of weights for each word.

ruby_word_array = ["Lorem","Ipsum","Dolor","Sit","Amet"]
ruby_weight_array = [15,10,13,8,4]

I need to convert my two Ruby arrays in such a way that they render properly with erb. So far I have come up with:

var wordArray = <%= raw @word_array.map{|a, i| {text: @word_array[0], weight: 15} } %> # I just hard coded the weight for simplicity

This gives me something that's close, but not close enough, and it ends up formatted like so:

var wordArray = [{:text=>"Lorem", :weight=>15}, {:text=>"Ipsum", :weight=>15}]

I really just need to know how to modify my last example to render in the Python style hash syntax {key: "value"},{key_2: "value_2"}

This is honestly a tricky one and I am stumped. The library I am using for this is called JQcloud, and it has a Ruby gem which I have incorporated into this Rails app. Here is a link.

score 6 · Accepted Answer · answered Oct 28 '15 at 02:48

6

Why don't your just use to_json?

# in ruby
@array = [{:text=>"Lorem", :weight=>15}, {:text=>"Ipsum", :weight=>15}]

Then, in the view:

var wordArray = <%= @array.to_json.html_safe %>;

Which will render:

var wordArray = [{"text":"Lorem","weight":15},{"text":"Ipsum","weight":15}];

answered Oct 28 '15 at 02:48

tompave

11,952
7
37
63

1

This is the easiest way to do this. You might need to add require 'json' to top of you file if not using Rails. Also, to go from json string to ruby, you can do JSON.parse(json_string) – Bassel Samman Oct 28 '15 at 02:57
That's right. the json lib will be required automatically in Rails, but you'll need to require it manually otherwise. – tompave Oct 28 '15 at 02:59
So I had tried to_json previously with no success, but then I realized that I need to convert my ruby array to an array of hashes and THEN call to_json. Now it seems to be working. – Oct 28 '15 at 10:20

score 0 · Answer 2 · answered Oct 28 '15 at 02:45

You should create a helper function in app/helpers that does the behaviour you want. It's better to leave complex logic out of the view. Then in the view

var wordArray = <%= myHelper @word_array %>

And in the helper

def myHelper(word_array):
  string = "["
  word_array.each do |word|
    string << "{text: \"#{word[:text]}\", weight: #{word[:weight]}},"
  string = string.chomp(",") #in case JS hates the last comma
  string << "]"
  return string

Really, though, you can put anything you want in myHelper. You could pass both arrays and put them together in the helper. You could add newlines to the strings. Anything is possible

score 0 · Answer 3 · answered Oct 28 '15 at 02:55

In such 2 Arrays situation, zip is useful.

ruby_word_array.zip(ruby_weight_array).map{|word, weight| "{text: #{word}, weight: #{weight}}"}.join(',')

If you need [],

'[' + ruby_word_array.zip(ruby_weight_array).map{|word, weight| "{text: #{word}, weight: #{weight}}"}.join(',') + ']'

how to render Ruby array as JavaScript array in ERB template

3 Answers3