Ruby Array неправильно передается в слой javascript

Question

У меня есть приложение, в котором у меня есть массив элементов на контроллере. Я хочу передать этот массив в представление Javascript, а затем преобразовать его в JSON и проанализировать.

Это мой взгляд:

<% content_for :page_meta do %>
    <script>
        const filterItems = "<%= @filter_options %>";
        const productItems = "<%= @mdms_products %>";           
    </script>

Если я отлаживаю @filter_options. У меня есть это на IRB:

@filter_options.class # => Array

И значение:

[{:name=>"Solution Type", :uid=>"application", :component=>"HierarchicalListFilter", :props=>{:rootUrl=>"/insulation/commercial/enclosure/applications", :rootText=>"Enclosure Solutions"}, :values=>[{:name=>"Walls", :slug=>"walls", :children=>[{:name=>"Framed", :slug=>"framed", :children=>[{:name=>"Steel Stud", :slug=>"steel-stud"}, {:name=>"Wood Stud", :slug=>"wood-stud"}]}, {:name=>"Masonry", :slug=>"masonry", :children=>[{:name=>"Concrete Masonry Unit", :slug=>"concrete-masonry-unit"}]}, {:name=>"Concrete", :slug=>"concrete", :children=>[{:name=>"Precast", :slug=>"precast"}, {:name=>"Tilt-up", :slug=>"tilt-up"}, {:name=>"Cast-in-place", :slug=>"cast-in-place"}]}, {:name=>"Metal Building", :slug=>"metal-building"}, 

Все выглядит идеально, верно? Но при отладке консоли javascript, когда я получаю значение productItems, я получаю странную строку:

[{:name=>"Solution Type", :uid=>"application", :component=>"HierarchicalListFilter", :props=>{:rootUrl=>"/insulation/commercial/enclosure/applications", :rootText=>"Enclosure Solutions"}, :values=>[{:name=>"Walls", :slug=>"walls", :children=>[{:name=>"Framed", :slug=>"framed", :children=>[{:name=>"Steel Stud", :slug=>"steel-stud"},

И, конечно, когда я пытаюсь выполнить JSON.parse (filterItems), он показывает ошибку разбора.

Итак, как лучше передать Ruby Array Json в Javascript?

Answer 1

Ruby имеет совершенно другую нотацию, чем JavaScript, поэтому вы должны выразить ее в правильной форме и убедиться, что она не экранирована от HTML:

<script>
  const filterItems = <%= @filter_options.to_json.html_safe %>;
  const productItems = <%= @mdms_products.to_json.html_safe %>;
</script>

Возможно, будет проще вывести все это как JSON и загрузить его через AJAX.