Sharing data from JavaScript to view in Rails: A step-by-step guide

After clicking the submit button, the controller renders with JSON data.

The JSON data is {notes: array[1], array[2]}. The next step is to render the view.html.erb file. How can the values in notes be displayed like <%= notes %> in this file?

Answer №1

If you have an array called `notes`, you can iterate over it and render the content in your `.erb.html` file like this:

<div>
  <% notes.each_with_index do | note, index | %>
    <div id="title">
      <%= note[:title] %>
    </div>
  <% end %>
</div>

Answer №2

It seems like there may be a mix-up between JSON requests and HTML requests.

The incoming request should be in HTML format.

Make sure the controller is set up correctly:

# GET /the_controller/view
# Do not use /the_controller/view.json <- This is incorrect
def view
   @notes = array
end    

In the view file view.html.erb, display the notes:

<%= @notes %>

Refer to @rishabh0211's answer for a more visually appealing presentation.

If you do intend for this to be a JSON request, perhaps through an AJAX request, please specify that in your question.

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

How to round whole numbers to whole numbers using JavaScript?

Looking to manipulate some numbers in JavaScript. Let's say we have x = 320232, y = 2301, and z = 12020305. The goal is to round these numbers to the nearest tens, hundreds, or thousands place. Thus, we want them to become x = 320000, y = 2300, and z ...

What is the best way to retrieve dates from a MySQL database using ExpressJS?

My current task involves retrieving the date value from a MySQL server, but upon printing the result, I encounter an error. In my code, I am able to fetch the date value, however, when attempting to print it, there seems to be an issue with the output. (F ...

As soon as a key is pressed in tinyMCE, the tracking continues until reaching the conclusion of the initial <

I am attempting to capture, in real-time, the user input in the .content textarea and paste it into the .intro. I have tried the following code without success: //This code is specifically for tinymce, as I am using tinyMCE as a rich text editor for textb ...

Using the Presentational - Container (or Smart - Dumb) component approach in conjunction with Vuex

When it comes to managing the Presentational - Container (or Smart - Dumb) component pattern with Vuex, what is your recommended approach? Should the Presentational (or Dumb) components emit events to the parent or call Vuex actions? Imagine a scenario w ...

Error: Unable to cast value "undefined" to an ObjectId for the "_id" field in the "User" model

Whenever a user logs into their account, I am trying to retrieve their data on the login screen. The login functionality itself works perfectly, but unfortunately, the user data is not displaying. I have tried troubleshooting this issue by making changes i ...

inter-site requests & browser extensions

I'm currently working on developing a Firefox Addon using the new WebExtensions system. My goal is to: Extract specific text from a webpage (not owned by me) Evaluate it using an external website Display the result on the same page The issue I&apo ...

Guide to integrating a Custom Font into live data on a PDF file with the help of jsPDF

I recently successfully converted a dynamic webpage to PDF using jsPDF and now I'm looking to customize the font family of the PDF document. Is there an option for this in jsPDF? Please advise, thank you! Here is my code snippet: <div id="#p ...

A guide on how to efficiently retrieve a string within a function in a native module in a React Native

I'm currently tackling a function related to the native elements of iOS that is coded in Objective-C, My goal is to create a method that will output a string in Objective-C, However, I've hit a roadblock while trying to implement this method: T ...

Using jQuery to send LocalStorage data to an email address with the help of PHP

Currently, I am in the process of developing a basic eCommerce/checkout system. My goal is to utilize localStorage data and transfer it to PHP using jQuery or any other method that is convenient. However, when I attempted to send the email, I only received ...

How to efficiently switch between classes in Ember Octane using Handlebars?

What is the best way to toggle between displaying a class on and off using Ember.js Octane? Should I use an @action or @tracked in this case? <img src="flower.jpg" alt="flower" class="display-on"> or <img src="flower.jpg" alt="flower" class=" ...

Exploring outside iframe data

My webpage includes an iframe A with a src attribute that links to a URL containing another embedded iframe B. I'm trying to figure out if it's possible to access the src of this nested iframe B. However, it appears that browser security measures ...

Using Angular JS version 1.2.26 to implement promises within a forEach iteration

I am working on a JavaScript project where I have implemented an angular.forEach loop to iterate over image configuration objects and create Image() objects using the URLs from the config. My goal is to ensure that none of the resulting images are returne ...

In Next.js, a peculiar issue arises when getServerSideProps receives a query stringified object that appears as "[Object object]"

Summary: query: { token: '[object Object]' }, params: { token: '[object Object]' } The folder structure of my pages is as follows: +---catalog | | index.tsx | | products.tsx | | | \---[slug] | index.tsx | ...

Showing hierarchical objects retrieved from JSON response

I'm still learning React, so bear with me if this is a simple issue. I have some nested data that I want to show in a list format. The data is fetched and displayed below: data: [ { "id": 1, "domain_url": "localhost", "created_on": "2020-05-26" ...

Creating seamless shading effects using three.js with Blender integration

When I import a Blender scene into a three.js environment, the curved faces appear flat. Is there a method to ensure that these surfaces remain smooth as intended? Despite calculating vertex normals and activating the smoothShaded option, the issue persis ...

Unable to retrieve table header information when clicking on a table cell

My code is working perfectly, except for the fact that when I click on a cell, I cannot retrieve the table header text. Retrieving the row text works fine based on the code. If I use Object.keys(data) inside the alert function to retrieve the data, it give ...

A guide on updating the Date Textfield value in Material UI

In my data structure, I have an array of objects with unique ids and date values. For instance, the array named stepDates might appear like this: [ { id: 1, date: "2021-07-23" }, { id: 2, date: null }, { id: 3, d ...

I am having issues with my dropdown-list on my second script not functioning properly

Hello there! I'm new to this platform and English is not my strong suit, so bear with me. I've encountered an issue in my code that I need help with. Step 1: I successfully created the first dropdown list. Step 2: The second dropdown l ...

Leveraging the import statement within lib.d.ts to enhance Intellisense functionality in Visual Studio Code

Looking to streamline my JavaScript project by utilizing custom global variables and harnessing the power of VSCode intellisense for auto completion. Here's what I'm aiming for: See example of auto completion for 'lol' After some sear ...

Retrieving a designated set of attributes for elements chosen using an element selector

Is there a way to retrieve specific attributes for the first 10 <p> elements in a document using jQuery? I know I can easily get the first 10 elements with $('p').slice(0,10), but I only need certain attributes like innerText for each eleme ...