Bringing back a collection of Ruby objects from a database query to be used

I'm having trouble fetching an array of dates from my database using my rails controller, which is then utilized by Javascript for rendering a calendar. It seems to be functioning properly when I test it in the rails console, but not in the actual view. Any suggestions on what might be causing this issue? Below is the code snippet.

Gear has_many line_items

LineItem belongs_to Gear

Javascript Variable

var $myBadDates = new Array("<%= @gear.line_items.rented %>");

View that is being returned.

var $myBadDates = new Array("[]");

Line Item Model (shortened)

class LineItem < ActiveRecord::Base
  belongs_to :gear

  scope :available, where(:cart_id => nil)

  def self.rented
    LineItem.available.collect {|x| (x.rentstart..x.rentend).to_a}
  end

end

Array from Rails Console

1.9.3-p194 :007 > g.line_items.rented
  LineItem Load (0.7ms)  SELECT `line_items`.* FROM `line_items` WHERE `line_items`.`gear_id` = 4 AND `line_items`.`cart_id` IS NULL
 => [[Tue, 12 Feb 2013, Wed, 13 Feb 2013, Thu, 14 Feb 2013, Fri, 15 Feb 2013, Sat, 16 Feb 2013, Sun, 17 Feb 2013, Mon, 18 Feb 2013, Tue, 19 Feb 2013, Wed, 20 Feb 2013, Thu, 21 Feb 2013], [Tue, 05 Feb 2013, Wed, 06 Feb 2013, Thu, 07 Feb 2013, Fri, 08 Feb 2013, Sat, 09 Feb 2013, Sun, 10 Feb 2013, Mon, 11 Feb 2013, Tue, 12 Feb 2013, Wed, 13 Feb 2013, Thu, 14 Feb 2013, Fri, 15 Feb 2013]] 

UPDATED Working javascript code from accepted answer

var $myBadDates = <%= @gear.line_items.rented.flatten.to_json.html_safe %>;

Answer №1

Consider utilizing the to_json function.

let $myIncorrectDates = <%= @gear.line_items.rented.to_json %>;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"React issue: Troubleshooting problems with using .map method on arrays of

I am struggling with the following code: const displayData = (data) => { console.log(data);// this displays an array of objects if (!data.length) return null; return data.map((movie, index)=>{ <div key={index} className=&qu ...

Triggering AWS Lambda functions with SQS

Utilizing AWS and SES for sending emails and SMS through a Lambda function using NodeJs. I need to make more than 1k or 500 REST API calls, with the average call taking 3 seconds to execute a single lambda function request. It is essential to process mul ...

The magic of React.js in creating fluid scrolling single page applications

Embarking on my journey with react.js, my aim is to develop a single page application where the top navigation links smoothly scroll to the relevant sections on the front page akin to THIS SITE. Currently, my application utilizes React.js and React-Router ...

Ways to restrict the character count in a form input field

I need to limit characters in an input box on a form to 140, but I am struggling to figure out how to do it. Using Angular on the front end. The code for the input section where I need a text limit is in new.html <div class="form-group"> <lab ...

selector must begin with attribute in order to only target the first input field and not any others

Having trouble with the attribute starts with selector for validation of fields with dynamic IDs. Tried multiple approaches but haven't been successful. Here's what I've attempted so far: I have looked at other suggestions on Stack Overflo ...

An unexpected error occurred: Angular is still not functioning correctly even though ng-route has been

Help! I'm encountering this dreaded error message: angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module usersApp due to: Error: [$injector:modulerr] Failed to instantiate module ngRoute due to: Error: [$injector:nomod] Modu ...

What is the best way for me to incorporate images retrieved from an API call into my

Hey everyone, this is my first time posting on here so if there's anything I'm missing, please let me know! I've run into an issue with the images on my categories page not aligning properly and being different sizes after I incorporated som ...

Is there a way to retrieve time data from a different server through AJAX?

I am in need of obtaining time information from an online source, whether it be an NTP server, JSON time server, or simply an HTTP Header. The precision is not important to me, but the requirement is that I must get the time from an online source. Unfortun ...

Using Swift 2 to trigger sounds based on various images within an array

I have an array of images stored in a variable let cardImages = ["bellota", "manzana", "botas"] To enable playing sounds, I set up myAudioPlayer like this: let filePath = NSBundle.mainBundle().pathForResource("correct", ofType: "wav") if let filePa ...

Creating React components through the use of the map function

Utilizing the hackernews api, I am attempting to extract the "data" property from my response object in order to display each story title individually on the browser. Initially, the data is structured as an array of id's representing individual storie ...

Creating a touch-like scrolling experience with CSS and the mouse

Is there a way to incorporate mouse scroll functionality in my Angular app similar to the scrolling feature on touch screen devices where you swipe left or right to navigate? I'm interested in implementing a scrolling technique that allows users to cl ...

How can I solve the issue of connecting to a database with mysql_connect() in PHP?

While using PHP and AJAX to query a database, I encountered the following error messages: Warning: mysql_query() [function.mysql-query]: A link to the server could not be established... and Warning: mysql_query() [function.mysql-query]: Can't connect ...

I aim to conceal the Spinner feature within the service layer of Vue JS

I have a basic bootstrap Spinner.vue component <template> <div class="modal" v-if="start"> <div class="spinner-border text-info" role="status" style="width: 3rem; height: 3rem;" ...

I have chosen to use a json file as the data source for the AutoComplete feature, as it allows for quicker loading times on the client side. This approach helps minimize hits to the database. Do you think

Currently, I am utilizing a JSON file as the source for AutoComplete. The JSON file is being downloaded at the client side in order to minimize hits on the database. I'm experimenting with this approach to find the most efficient way. What are your th ...

What is the best way to transfer information between two components in React.js by simply clicking a button?

One of the challenges I am currently facing involves rendering data from the Pokemon API in a table. Within this table, there is a button that allows users to select specific data when pressed. My goal is to send this selected data from the table component ...

I'm having trouble with my Express server routes not being accessed. The browser is displaying an error message saying 'No Data Received ERR_EMPTY_RESPONSE

I've encountered an issue with my express server while setting up an email service. Despite troubleshooting and simplifying the code to a basic 'hello world' example, the problem persists. No routes are functioning properly – requests made ...

Rotating the icon in Bootstrap Accordion upon opening

I am trying to customize a Bootstrap 4 accordion by conditional rotating the icon to point up when it is open and back down when closed. I managed to achieve this using CSS, but now I need to implement it conditionally based on active states rather than ev ...

Whenever my code is used within Google Sites, it triggers the opening of a new and empty tab

When using this code inside an HTML box in Google Sites, a problem arises. It seems to work perfectly fine in Internet Explorer and Chrome when saved to an HTML file. However, within Google Sites, it unexpectedly opens a new tab with no data. The code st ...

ClickAwayListener in MUI has the potential to impact all the elements within a popper when attempting

As a new react developer, I have encountered a small problem with my ClickAwayListener. It should close the Popper component when clicking 'x' or outside of it, which it does successfully. However, I have another component inside my Paper, and wi ...

Despite encountering an HTML 422 error, the AJAX form continues to submit successfully

Creating a custom form for Lesson objects on my Rails app was necessary as the built-in form_for didn't meet my requirements. The custom HTML form submits smoothly without any issues. In this app, users can book lessons on a calendar, with each hour i ...