Guide on utilizing the gon gem for displaying database values instead of objects

After following a helpful tutorial by Ryan Bates, I realized that the final output was just a bunch of objects rather than their values. The tutorial can be found here.

In my database, I have a model called User with attributes name (string) and value (integer).

Instead of seeing [object Object],[object Object],[object Object],[object Object],[object Object], I would like the alert javascript function to display all the names and values from the database.

class UsersController < ApplicationController
  before_action :set_user, only: [:show, :edit, :update, :destroy]

  # GET /users
  # GET /users.json

  def index
    gon.users = User.all
  end
end

This is how my users controller looks:

alert gon.users if gon

Answer №1

To easily get the JSON representation of data, simply use the as_json method.

gon.users = User.all.as_json

Update:

Upon further investigation, it appears that gon handles this process automatically. If you encounter a rendering issue, you can attempt the following approach:

var renderedUsers = JSON.stringify(gon.users);
alert(renderedUsers);

Alternatively, in CoffeeScript

renderedUsers = JSON.stringify gon.users
alert renderedUsers

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

Using Angular 4's ngModel can result in the transformation of data type from 'number' to 'string'

I am facing an issue with my Angular4 app where data captured from a form is stored in DynamoDB. The problem arises when an input field typed as 'text' is bound to a Typescript 'number' field, which seems to be converting the object val ...

Is it possible to create models that can be used in both Node.js and angular without duplication

Currently, I am diving into the world of Node.js and Angular (part of a MEAN project) through an online course on Udemy. One challenge I have encountered is the need to create identical models for both the back-end and front-end (specifically with angular2 ...

Logic behind a 2-player turn-based game

Hey there, I'm new to JavaScript and I'm currently working on developing a simple multiplayer turn-based card game. With my current coding skills, I've come up with a pseudo code for implementation as shown below: I have three main files: i ...

Using PHP to have multiple buttons with unique names to dynamically update MySQL database through AJAX calls

I am facing a challenge where I have multiple buttons generated using a while loop, each with different names (button[$nostation]). Now, I need to update the MySQL database (table: smt, column: no) with the corresponding id ($nostation). Can someone guid ...

Make sure to wait for the complete loading of all content in the AJAX response before showing it on

I am currently working on a search function that sends a json request to the server for results every time a character is entered. Although this part is functioning correctly, I am trying to figure out how to add a loading class to .search-load > .conta ...

Slider Jquery - Displaying Half-Step Visual Bar Lengths

JSFIDDLE $(function() { $( "#slider-range-min" ).slider({ range: "min", value: 5, min: 0, step: .5, max: 10, slide: function( event, ui ) { $( "#amount" ).val(ui.value); ...

Manipulating URLs in Javascript: Removing portions and appending queries

Is there a way to modify an URL by removing a portion and adding a query before returning it? For example: locahost:8080/product/orders/1. I would like to remove the orders/1 part and add /?query="sample". ...

What could be causing my item-list to malfunction in Vue.js?

I recently attempted to develop my own Vue.js application by following the provided documentation. Unfortunately, I encountered an error that has proven difficult to resolve. Despite my efforts to recreate the app as instructed, the list does not show an ...

To identify the dynamically inserted and generated div element amidst the other elements on the page

My goal is to have a new div generated and inserted over the other elements on the page when a button is clicked. Here is the markup I've written: <div id="parent"> <div id="d1"> </div> <div id="d2"> </div&g ...

Combine two objects while keeping only specific properties

Currently facing a challenge with merging two objects in the desired way using Node.js express and MongoDB. Here are the initial objects: Obj1: { "name":"max", "age":26, "hometown": & ...

Error code EPERM encountered while attempting to append a file on a network

An issue arises when the application is required to store log data on a network drive. While everything works smoothly when the drive is hosted under Windows, complications arise when it is hosted on a Mac. Read/write operations function properly, but appe ...

Issue with hide.bs.modal event not triggering in Bootstrap 3.2 when using Django 1.6.5 with remote modal content

I need help with a dashboard I'm working on that displays a list of hosts. When a user clicks on a host, I want to show additional details in a modal dialog. Right now, I am using Bootstrap's remote modal feature to trigger a Django view and popu ...

AngularJS - Best practices for defining Angular modules

Imagine you have an angular js app called myApp with a controller and directive. How should you go about declaring both components? angular.module("myApp",[]) .controller("myController"...... angular.module("myApp") .directive("myDirective"....... OR a ...

Using jQuery or JavaScript to hide a div if the image inside it is unable to load

There is a div called 'userFeatureProductImage' that is duplicated. Sometimes a broken image may appear, so I would like to hide the div as a precautionary measure. How can I achieve this? ...

Is it possible to generate an error if you attempt to retrieve a property that does not exist within a JavaScript object?

I am creating a new object with specific properties. I need to ensure that an error is triggered if the user attempts to retrieve a property that doesn't actually exist. Is there a way to achieve this in my code? ...

What is the process for executing server-side scripts in NextJs?

I recently started exploring NextJs and I am working on developing an application that needs to make periodic requests to a database to update the data. However, I'm having trouble figuring out how to achieve this. The challenge I'm facing is tha ...

Creating a fresh observable with Angular 2's RxJS filtering capabilities

Looking to deepen my understanding of RxJS within my Angular 2 application that utilizes angular-redux/store. I am fairly new to RxJS version 5.1.1 and currently in the process of grasping its concepts. My store is up and running smoothly, allowing me to ...

Accessing the facebox feature within a dropdown menu

Looking for assistance in creating a function to open a facebox when an option from a drop down list is selected. Here is what I have so far: <select><option value="www.google.com/" id="xxx"></option></select> In the header sectio ...

Provide a class name to the div element containing the radio button that has been

<div> First : <input type="radio" name="typeof" id="typeof1-grey" value="grey" /> Second : <input type="radio" name="typeof" id="typeof2-pink" value="pink" /> Third : <input type="radio" name="typeof" id="typeof3-green" val ...

Having trouble establishing a connection to the FTP server through the "ftp" package provided by npm

Attempting to establish a connection to a Secured FTP server using the "ftp" package. When connecting to an unsecured server, everything functions as expected with all events firing and content being displayed. However, upon trying to connect to a server ...