Send JSON object from rails controller to Javascript

Question

So I have a hash that I built which looks something like this:

Track_list = {:track1=>{:url=>"https://open.spotify.com/track/2Oehrcv4Kov0SuIgWyQY9e", :name=>"Demons"},
 :track2=>{:url=>"https://open.spotify.com/track/0z8yrlXSjnI29Rv30RssNI", :name=>"Shots - Broiler Remix"},
 :track3=>{:url=>"https://open.spotify.com/track/6Ep6BzIOB9tz3P4sWqiiAB", :name=>"Radioactive"},
 :track4=>{:url=>"https://open.spotify.com/track/3I05foFixB2sSZvV5Ppty8", :name=>"Blank Space/Stand By Me - Medley / Live From Spotify London"},
 :track5=>{:url=>"https://open.spotify.com/track/4G8gkOterJn0Ywt6uhqbhp", :name=>"Radioactive"}}

And I am trying to convert that hash into a JSON so I can use it in my JS file and this is what I did in my controller:

@tl = track_list.as_json
# and it produces a result like this:
# {"track1"=>{"url"=>"https://open.spotify.com/track /2Oehrcv4Kov0SuIgWyQY9e", "name"=>"Demons"},
# "track2"=>{"url"=>"https://open.spotify.com/track/0z8yrlXSjnI29Rv30RssNI", "name"=>"Shots - Broiler Remix"},
# "track3"=>{"url"=>"https://open.spotify.com/track/6Ep6BzIOB9tz3P4sWqiiAB", "name"=>"Radioactive"},
# "track4"=>{"url"=>"https://open.spotify.com/track/3I05foFixB2sSZvV5Ppty8", "name"=>"Blank Space/Stand By Me - Medley / Live From Spotify London"},
# "track5"=>{"url"=>"https://open.spotify.com/track/4G8gkOterJn0Ywt6uhqbhp", "name"=>"Radioactive"}}

However, when I go to my JS file and try to print out the file, This is what I get:

console.log("<%= @tl %>");
"{&quot;track1&quot;:{&quot;url&quot;:&quot;https://open.spotify.com/track/2Oehrcv4Kov0SuIgWyQY9e&quot;,&quot;name&quot;:&quot;Demons&quot;},&quot;track2&quot;:{&quot;url&quot;:&quot;https://open.spotify.com/track/0z8yrlXSjnI29Rv30RssNI&quot;,&quot;name&quot;:&quot;Shots - Broiler Remix&quot;},&quot;track3&quot;:{&quot;url&quot;:&quot;https://open.spotify.com/track/6Ep6BzIOB9tz3P4sWqiiAB&quot;,&quot;name&quot;:&quot;Radioactive&quot;},&quot;track4&quot;:{&quot;url&quot;:&quot;https://open.spotify.com/track/3I05foFixB2sSZvV5Ppty8&quot;,&quot;name&quot;:&quot;Blank Space/Stand By Me - Medley / Live From Spotify London&quot;},&quot;track5&quot;:{&quot;url&quot;:&quot;https://open.spotify.com/track/4G8gkOterJn0Ywt6uhqbhp&quot;,&quot;name&quot;:&quot;Radioactive&quot;}}"

And when I try to do:

console.log(JSON.parse("<%= @tl %>");

It doesnt work. I also tried putting j in front of @tl and it gave me the error saying that hash cannot be used with gsub.

Also, when I try to do this:

@track_list = JSON.generate(@tl) # from above

I get this:

"{\"track1\":{\"url\":\"https://open.spotify.com/track/2Oehrcv4Kov0SuIgWyQY9e\",\"name\":\"Demons\"},\"track2\":{\"url\":\"https://open.spotify.com/track/0z8yrlXSjnI29Rv30RssNI\",\"name\":\"Shots - Broiler Remix\"},\"track3\":{\"url\":\"https://open.spotify.com/track/6Ep6BzIOB9tz3P4sWqiiAB\",\"name\":\"Radioactive\"},\"track4\":{\"url\":\"https://open.spotify.com/track/3I05foFixB2sSZvV5Ppty8\",\"name\":\"Blank Space/Stand By Me - Medley / Live From Spotify London\"},\"track5\":{\"url\":\"https://open.spotify.com/track/4G8gkOterJn0Ywt6uhqbhp\",\"name\":\"Radioactive\"}}"

So it's actually escaping everything correctly...I don't know why when I use the same variable in my JS file, it doesn't escape the quotes or anything.

Thanks!

Answer 1

您可以通过执行以下操作将 JSON 对象从 Rails 控制器发送到 Javascript：

console.log("<%= @tl.to_json.html_safe %>");

Answer 2

Try this:

var my_obj = <%= j @tl %>;
console.log(my_obj);

You just have a couple minor issues. You do need to use escape_javascript in your view (or its alias j ). But also you are sticking the json object between quotes, which will cause the browser to treat it like a string instead of a json object.