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

У меня есть приложение, в котором у меня есть массив элементов на моем контроллере. Я хочу передать этот массив в представление 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=&gt;&quot;Solution Type&quot;, :uid=&gt;&quot;application&quot;, :component=&gt;&quot;HierarchicalListFilter&quot;, :props=&gt;{:rootUrl=&gt;&quot;/insulation/commercial/enclosure/applications&quot;, :rootText=&gt;&quot;Enclosure Solutions&quot;}, :values=&gt;[{:name=&gt;&quot;Walls&quot;, :slug=&gt;&quot;walls&quot;, :children=&gt;[{:name=&gt;&quot;Framed&quot;, :slug=&gt;&quot;framed&quot;, :children=&gt;[{:name=&gt;&quot;Steel Stud&quot;, :slug=&gt;&quot;steel-stud&quot;},

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

Итак, как лучше всего передать массив Ruby в Json в Javascript?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Может быть проще отобразить все это как JSON и загрузить его через AJAX.

Спасибо @tadman. В этом конкретном случае (у меня есть БОЛЬШОЕ количество данных в моем сеансе, и мне не нужно делать асинхронные вызовы на сервер) это была только проблема синтаксического анализа. Это сработало как заклинание. Спасибо еще раз

Fernando Maymone 10.07.2019 02:40

Другие вопросы по теме