How can I access Rails variable in Javascript?

Question

I have a Rails variable that I need to pull all the dates and time (send_time) and put into a JS array. I am trying to use the JS array of sent_times to block users from using those date/times in the future. Think scheduling a meeting room for one hour blocks. Two meetings can't go at the same time.

I have inspected the variable in my JS.

var taken = <%= @taken.inspect.html_safe %>;

Here is the inspected variable

    var taken = [

    #<ScheduledRequest _id: 5b7f6b2842195a000400000f, send_time: 2018-08-25 18:00:00 UTC, sent_time: nil, warning_time: 2018-08-25 16:30:00 UTC, actual_send_time: 2018-08-25 16:45:00 UTC, processing: nil, retries: 10, pickup_address: "2209 West Anderson Lane, Boston, MA, USA", dropoff_address: "2209 West Anderson Lane, Boston, MA, USA", round_trip: false, token: nil, pickup_location: [-37.729439, 40.355348], dropoff_location: [-47.729439, 30.355348], notes: "Scheduled: Simple assembly and take away trash.", ip: "XHgw1nn3xIHzfs5t2xzZ/ez0Tj5gg=", notify_email: "", notify_phone: "", user_id: "53f4b008", thingy_type: "Blue Row", thingy_request_id: nil, error: nil, two_hour_warning_sent: nil, identifier: nil, estimated_time: "", thingy_request_log: nil, for_customer_api: false, removed: false, edit_date: "2018-08-25", edit_hours: "01", edit_minutes: "00", edit_ampm: "PM">, 

    #<ScheduledRequest _id: 5b7f92964029e90004000013, send_time: 2018-08-28 01:00:00 UTC, sent_time: nil, warning_time: 2018-08-27 23:30:00 UTC, actual_send_time: 2018-08-27 23:45:00 UTC, processing: nil, retries: 10, pickup_address: "5501 Spicewood Springs Road, Boston, MA, USA", dropoff_address: "2345 West Anderson Lane, Boston, MA, USA", round_trip: false, token: nil, pickup_location: [-77.771753, 20.384814], dropoff_location: [-57.7322452, 10.356484], notes: "Scheduled:", ip: "XHgwMmB7fk1lRn1Bg8ooqhwM4xQsg=", notify_email: "", notify_phone: "", user_id: "53f4b08", thingy_type: "Blue Row", thingy_request_id: nil, error: nil, two_hour_warning_sent: nil, identifier: nil, estimated_time: "", thingy_request_log: nil, for_customer_api: false, removed: false, edit_date: "2018-08-27", edit_hours: "08", edit_minutes: "00", edit_ampm: "PM">

    ];

UPDATE:

I stripped off data and created a new Ruby array.

result = []
sr.each do |r|
  record = {}
  record[:send_time] = r.send_time
  record[:ambulance_type] = r.ambulance_type
  result << {:ambulance => record}
end
result

I am using this now. var taken = <%= @taken.as_json %>;

Now getting this (scrub data for sensative info).

var taken = [{&quot;thingy&quot;=&gt;{&quot;send_time&quot;=&gt;&quot;2018-08-25T18:00:00.000+00:00&quot;, &quot;thingy_type&quot;=&gt;&quot;Row Delivery&quot;}}

You can also use gon gem Follow the link for more information github.com/gazay/gon — Mayur Shah
– Mayur Shah, Commented Aug 24, 2018 at 6:15

Marek Lipka · Accepted Answer · 2018-08-24 06:05:40Z

2

Yeah, @taken.inspect.html_safe isn't a good way to pass your activerecord relation to JS, as you can see. It would probably make much more sense if you pass it as json:

var taken = <%= @taken.as_json %>

Keep in mind though, that this way you expose all of your record's content to the front-end, which might not be desired.

answered Aug 24, 2018 at 6:05

Marek Lipka

51.3k7 gold badges90 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jdog Over a year ago

I tried this and created my own object but the encoding is not right. var taken = [{"thingy"=>{"send_time"=>"2018-08-25T18:00:00.000+00:00", "thingy_type"=>"Row Delivery"}} See above UPDATE.

jdog Over a year ago

Also once converted to JSON via .as_json how do I access that data in JS?

rfestag · Accepted Answer · 2018-08-25 03:39:33Z

First, note the difference between as_json and to_json. as_json returns a hash, which then is getting stringified. to_json will actually create a JSON string. See this question for more details and references: Difference between as_json and to_json method in Ruby

I'd recommend updating your ScheduledRequest model to have an as_json method that effectively does what is within the each of your update (returning a hash representation of a single ScheduledRequest. Then, in your view, you can

var taken = <%= @taken.to_json.html_safe %>

The to_json will return a JSON array, and the html_safe will ensure it doens't get html encoded (which is what you're seeing above). Pulling the logic for how to represent individual ScheduledRequest objects ensures that the class is responsible for determining how to represent itself as JSON, vs. making that a view concern. Note that, as you have it, you are making your @taken variable accessible in javascript as taken via the assignment above.

Collectives™ on Stack Overflow

How can I access Rails variable in Javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related