Sending an object from Rails to Javascript

Question

Sending an object from Rails to Javascript

My MapsController is

def show
   @outlet=OUtlet.all
   render 'maps/map'
end

In the view page map.html.erb, I iterate through each outlet to display their latitude and longitude:

<% @outlet.each do |product| %>
    <%= product.latitude %>
    <%= product.longitude %>
<% end %>

The resulting coordinates are:

   51.503454  -0.119562  51.499633 -0.124755 51.489633  -0.123755 51.479633  -0.122755

Now, I need to pass this array to a JavaScript variable named markers in the following format:

var markers = [
    [ 51.503454,-0.119562],
    [ 51.499633,-0.124755],
    [ 51.489633,-0.123755],
    [ 51.479633,-0.122755]
];

I have attempted solutions like using javascript_tag and attribute method but have not been successful. Any assistance on how to properly achieve this would be greatly appreciated.

This marker data format is essential for plotting points on a Google Map.

javascript ruby-on-rails arrays ruby

Answer 1

Answer №1

If you need to retrieve an array of latitude and longitude values, consider creating a helper method for that purpose.

module CoordinatesHelper
  def fetch_coordinates(locations)
    coordinates = []
    locations.each do |location|
      coordinates << [location.latitude, location.longitude]
    end
  end

After defining this helper method, you can use it in your JavaScript code like this:

var markers = <%= fetch_coordinates(@locations) %>;

Answer 2

If you need to retrieve an array of latitude and longitude values, consider creating a helper method for that purpose.

module CoordinatesHelper
  def fetch_coordinates(locations)
    coordinates = []
    locations.each do |location|
      coordinates << [location.latitude, location.longitude]
    end
  end

After defining this helper method, you can use it in your JavaScript code like this:

var markers = <%= fetch_coordinates(@locations) %>;

Sending an object from Rails to Javascript

Answer №1

Similar questions

Executing a C# method from within a .js file using a Javascript function in a .cs file

Creating an event emitter instance

sw-precache-webpack-plugin for webpack's default service worker template

Is there a way to store a JSON object retrieved from a promise object into a global variable?

Sort the multidimensional array/object by the highest value

Different Slide Library Fullpage.js

Is there a way to continuously click on a button 99 times or until the code finishes running?

The issue arises when using IE8/9 with $.get and .html() functions, as the retrieved data

Search for specific parameters in an array and retrieve them

Challenges with displaying the appropriate user interface in the dashboard according to different roles

Unable to interact with a button through JavaScript using execute_script in Selenium

Vue JS - Unable to locate module (datepicker)

I'm looking to switch out the `~` to turn it into a URL for the backend, seeing as `<img alt="" src="~/media/Banner/plane.JPG">` is returning a 404 error

What is the process for submitting a form in Laravel 5 with ajax?

The Ionic AngularJS http service is failing to update the controller

Activate the default JavaScript action within an event handler

Discovering the name, id, and class attributes of a RadioButtonList within a content placeholder using JavaScript

I am encountering an issue where my express.js server is not successfully processing the data sent from my react native

Tips for concealing Bootstrap 5 modal exclusively after successful completion

Dealing with the validation of two forms on a single webpage: Strategies and Solutions