javascript - Ruby 数组被错误地传递给 javascript 层

Question

我有一个应用程序，我的 Controller 上有一个元素数组。我想将此 Array 传递给 Javascript View ，然后将其转换为 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 数组传递给 Javascript 中的 Json 的更好方法？

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 加载它可能更容易。