Incorporating the Acts_as_votable gem alongside Angularjs for interactive voting functionality

I'm trying to figure out how to implement Acts_as_Votable in an Angular template for a car voting system. Despite my efforts, I can't seem to display the vote count when rendering the list in Angular.

I think I may need to establish some kind of association for :votes within the JSON rendered in the controller, similar to what is done with :marque. This is as far as I've gotten so far. Any help would be greatly appreciated!

Thank you

cars_controller.rb

def index
  @cars = Car.all
  respond_to do |format|
    format.html {}
    format.json {render json: @cars, :include => :marque}
  end
end

index.html.erb

<div ng-repeat="car in cars | rangeFilter:slide | filter:name">
  <div class="col-sm-6 col-md-4">
     <ul class="thumbnail">
        <li>{{car.marque.name}}</li>
        <li>{{car.name}}</li>
        <li>{{car.power}}</li>
        <li>{{car.rotor}}</li>
        <li>Votes: {{car.votes_for.size}} </li>
        <li><%= link_to 'Show', URI::unescape(turbine_path('{{car.id}}'))%></li>
        <li><%= link_to "up", URI::unescape(like_turbine_path('{{car.id}}')), method: :put, class: "btn btn-default btn-sm" %></li>
      </ul>
    </div>
 </div>

Answer №1

Right after posting my question, I managed to figure out the solution. Isn't that always the way?

To incorporate votes_for using JSON

def list
  @items = Item.all
  respond_to do |format|
    format.html {}
    format.json {render json: @items, :include => [:category, :votes_for] }
  end
end  

Then calculate it in React

<li>Total Votes: {{item.votes_for.length}} </li>

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

No cookie found in the system

Attempting to create an effect using bloom and shaders in post-processing. However, encountering an error in the console with a blank white screen. I have tried clearing cookies, caches, and even running this in incognito mode, but it's still not work ...

Searching in Vue based on the selected option is only possible by the selected criteria and not by id, regardless of the

#1 Even if chosen, cannot search by id. The 'name' condition in the loop works well but I am unable to correctly search by id (returns nothing). #2 When selecting an option from the dropdown menu, it only displays until I start typing. I would l ...

Ending the jQuery Modal box

Struggling to create a simple modal on my own, and I'm facing some difficulties (probably because I'm more of an expert in jQuery - but let's not dwell on that too much). This is the HTML markup I have: <div id="modal-boxes"> < ...

Transmitting an Array of Objects to a Web API using AngularJS

Throughout this process, I retrieve an array of "vehicles" from the Web API. I then make modifications and perform various actions on each vehicle. Afterwards, I aim to send back the updated list without the need for looping through it again. I have exper ...

What is preventing my Three.js object from responding to my commands to move?

I'm currently working on a three.js project where I want to create a block that moves when different keys are pressed. I've managed to set up a functional event listener, used console.log() for checking purposes, and successfully moved the block ...

What is the process for refreshing a page by clicking on a button?

I have encountered an issue in my application where the data fetched from the database is not displayed immediately upon reopening the page. I am looking for a solution to reload the page when a button is clicked. https://i.sstatic.net/Dg4V9.png Below is ...

Looking to change the input field names by increasing or decreasing when clicking on a div using jQuery?

As a beginner in the world of jQuery, I am working on mastering some basic concepts. Currently, my goal is to create auto incrementing/decrementing input field names within a 'div' when clicking on an add/remove button. Below is the HTML code I a ...

Is AngularJS $location.path the same as the current URL?

Is there a way to manually reload the page? I tried using $location.path('/account'); and it successfully redirected me to a different page. However, when I tried $location.path('/account/messages'); while already on /account/mess ...

How can I create numerous HTML containers using Javascript?

I've been learning from this tutorial: Instead of just displaying the last database object, I want to display all of them. I have tried outputting the database contents and it's working fine. Now, I just need to adjust the HTML. I attempted to ...

Any tips for filtering an array within an array of objects using the filter method?

I have an array of products and models that I am currently filtering based on 'id' and 'category'. var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.products = [{ 'id': 1, ...

Troubleshooting problem with Z-Index conflict in Flash animation

I am facing an issue with two HTML divs - one containing a flash movie and the other simple text. I want to place the textual div on top of the flash movie div, but no matter how I set their positions in CSS or adjust their Z-Index values, the text keeps ...

Troubleshooting Test Failures: The importance of passing $controller in the callback of 'it' function in Angular

As a newcomer to testing, I am attempting to write Jasmine/Karma tests for a controller. Given a sample test to use as a starting point, the issue arises when passing the $controller in the argument of the it block. The test passes successfully with this s ...

What sets apart !$scope.variableName from $scope.variableName in AngularJS?

Greetings to all my fellow coders! As a newcomer in the field, I often find myself pondering over things like this. Would someone be kind enough to elucidate the dissimilarity between these two elements in AngularJs? $scope.variableName and !$scope.var ...

Having trouble persisting my login status in Selenium using Python

Has anyone experienced issues with logging into Instagram using an automate tab? Previously, I didn't have any problems, but now it seems that Instagram is not allowing users to log in through automation. An error message stating the following appears ...

Incorporating a text box underneath the model image

My application currently utilizes a grid gallery that perfectly fits my needs. However, there are two specific changes I need to make in order for it to be complete for my purpose. Unfortunately, I am struggling to figure out how to implement these changes ...

Calendar complete: ActiveRecord::RecordNotFound (Event with 'id' = update not found)

I'm currently facing an issue with integrating FullCalendar into my rails application. Specifically, I am encountering difficulties with saving after performing drag-and-drop actions. Within my application, I have two models - Event and Workout. The ...

Exporting modules in node.js is driving me crazy. Just four lines of code and I can't figure out what's wrong

Currently, I am delving into the realm of node.js through an online course on Udemy. However, I've run into a perplexing issue that seems to defy logic and reason. The lesson revolves around accessing external files in node.js using module.exports. I ...

Utilizing dynamically assigned ng directives in my unique custom directive

I'm in the process of creating a customized table element that looks like this: <datatable items='tableItems' columns='columnsConfig' /> Here, 'tableItems' represents my array of items and 'columnsConfig&apos ...

JavaScript implementation of a carousel slider with responsive design

I have successfully implemented a feature carousel slider using the jquery.featured.carousel.js file along with some CSS. Here is the jsfiddle link to my project: LINK. When running this code on localhost, I noticed that I need to refresh the page every ...

Angularjs - How come I am able to modify an object but not the list (ng-repeat) from a separate view?

After updating the customers object in the console, I noticed that the list (ng-repeat) is not reflecting the changes. What should I do? Interestingly, it works fine when I implement this function and view2.htm's HTML inside page.htm. HTML "page.htm" ...