Manipulating arrays in JavaScript through HTML processing

I'm encountering an issue while trying to send an array to a JavaScript function. Here's what I have so far:

Within the controller:

@data = [{date: '2014-08-17'}, {date: '2014-08-20'}].to_json

In the view:

<%= content_tag(:div, nil, :data => {:values => @data } ) %>

And in the JavaScript code:

var eventsList = $('#default').attr('data-values')

The problem is that the variable eventsList is being interpreted as a string rather than an array. How can I make sure that JS recognizes it as an array?

javascriptruby-on-railsarrays

Answer №1

When you assign values to the data-values attribute, it is being encoded in JSON format. Therefore, on the client side, you will need to decode it.

var listData = JSON.parse($('#default').attr('data-values'));

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

The Requirejs Optimizer is failing to compile

Struggling with getting the optimization tool to work while using requirejs. My aim is simple: optimize my javascript files into one script file with all dependencies included. All my files reside in the js/ folder, including a subfolder named vendors/ M ...

javascriptoptimizationrequirejsr.jsjs-amd

Sending information from one Angular 2 component to another

As a newcomer to Angular 2, I am still in the process of understanding its functionalities. Currently, I have two components: 1) List Component This component is responsible for displaying all the products in a store and performing various functions. @C ...

javascriptangular

Javascript: Iterating over a promise contained in an object

Currently, I am attempting to iterate through a return from an API that supposedly contains an object with a promise within it. You can find the API documentation here: https://github.com/sentanos/roblox-js/wiki/Main-Functions This is what my code looks ...

javascript

User form not triggering post requests

I have a unique react blog application embedded with a form for submitting intriguing blog posts. The setup includes a server, routes, model, and controllers for fetch requests. Surprisingly, everything functions impeccably when tested on Postman. However, ...

javascriptreactjsmongodbexpress

TypeError occurs when app.use is used with multer configuration

I am currently facing an issue while attempting to set up multer in my app.js file (using node.js/express) for enabling users to upload images. The code snippet in app.js is as follows: // Various require statements including passport, cookie parser, etc. ...

javascriptnode.jsexpressmulter

Displaying a certain div when clicked within a loop using Vue.js and Laravel

I am currently facing an issue with displaying a hidden div upon click. The problem arises when using a loop to dynamically generate all the divs. Whenever I click the button, it shows all the divs instead of just one specific div on each click. I attempte ...

javascriptjquerylaravelvue.jstoggle

Can you help me convert this Mongoose code to use promises?

Using Mongoose's built-in promise support, I aim to streamline the process of a user sending a friend request to another user. However, even with careful error handling and sequencing in place, I find myself grappling with a slightly condensed pyramid ...

javascriptnode.jsmongodbmongoosepromise

React: Encountered an expression in JSX where an assignment or function call was expected

Trying to build a left-hand menu for my test application using react. Encountering a compilation error in the JSX of one of my classes. Is it because HTML elements cannot be placed within {} scripts in JSX? If so, how do I fix this? ./src/components/Left ...

javascriptreactjs

How can I extract a substring using jQuery?

<script type="text/javascript"> $(function(){ $("a[rel='tab']").click(function(e){ e.preventDefault(); pageurl = $(this).attr('href'); $.ajax({url:pageurl+'?rel=tab',success: function(data){ $(&apos ...

javascriptjqueryajax

Choose the initial offspring from a shared category and assign a specific class identifier

I am trying to figure out how to apply the "active" class to the first tab-pane within each tab-content section in my HTML code. Here is an example of what I'm working with: <div class="tab-content"> <div class='tab-pane'>< ...

javascriptjqueryhtmldom

Having difficulty understanding why the Javascript regex is not functioning as expected

Can you help me validate user input to ensure it is a positive currency value in the correct format? Examples of valid formats include: 0.5, 0.55, 5 (please note this one), 5.5, 5.55, 55, etc. This is the code I am currently using: if ($("#gross").val() ...

javascriptregex

Trouble with Angular 1.6 ng-repeat not showing search results

I can't seem to figure out why ng-repeat is not showing the search results. Here's what works: Using an HTTP GET request to retrieve all data from the database, and seeing the results displayed by ng-repeat. Sending an HTTP GET request with ...

javascriptangularjsangularjs-1.6

Why is it necessary to call the .call(this) method when extending a THREE.js "class"?

Currently, I am in the process of creating a new object that should inherit from THREE.Object3D(). In my code snippet, you can see how I have set it up: function myNewObject() { THREE.Object3D.call(this); //... } myNewObject.prototype = new THREE.O ...

javascriptthree.js

Using Tinymce to automatically send form on blur action

Attempting to trigger form submission upon blur event in Tinymce, but encountering difficulties. tinymce.init({ selector: 'textarea.html', menubar:false, force_br_newlines : true, force_p_newlines ...

javascriptjquerytinymcetinymce-4

Display various child components in a React application depending on the current state

I'm currently developing a brief React quiz where each question is represented as an independent component. I aim to swap out the current question component with the next one once a question is answered. Here's the present state of my root compon ...

javascriptreactjs

The issue with the value of the textarea in Selenium automated tests using

I have a webpage with Javascript where I've implemented a textarea using the following code: var textarea = $("<textarea>"); textarea.change(() => { console.log(textarea.val()); }); When I update the value in the textarea and then chang ...

javascriptpythonjqueryselenium

The JSON data response is not being properly displayed on the div element

I am having trouble with the success function in my ajax call. The data is processed correctly in the view and the ajax call works fine, but for some reason, the data is not getting appended to the div. Here is my jQuery: $(document).ready(function() { ...

javascriptjquerypythonhtmldjango

While making changes, I was anticipating a "for-of" loop to be used instead of a "for" loop

There seems to be an issue with TSlint and its disapproval of using the traditional for(i=0; ...) loop. Consider this straightforward code snippet: this.filters['1','2','3'....]; for (let i = 0; i < this.filters.length; i+ ...

javascripttypescripttslintfor-of-loop

Get the final element from an array using PHP

Within the array called arrayname, there are several values depicted in the image above. Is there a way to obtain the last value within the arrayname array, disregarding any empty values such as arrayname1[7]? The desired outcome should exclude any empty ...

phparrays

Having trouble accessing the property 'keys' of undefined in React event handling operations

I am currently working on implementing a button that executes Javascript code roshtimer(), along with the ability for users to trigger the command using hotkeys. Users should have the option to either click the button or press 'r' on their keyboa ...

javascriptreactjsevent-handling