Having trouble retrieving JSON data from the controller while utilizing Angular's $http method

Trying to extract information from an action in my controller.

The current state of the action is as follows:

def index
        @users = User.all

        respond_to do |format|
            format.html
            format.json { render json: @users }
        end
end

This index page is designated as the root in routes.rb

Now, here's a glimpse of my AngularJs controller where I'm attempting to retrieve the data:

@test.controller 'TestCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
    $scope.data = []

    $http.get('/')
    .success (data) =>
        $scope.data = data
        console.log($scope.data)
    .error (data) ->
        console.log('error!')
]

Upon loading the root page, only the entire page loads in the Javascript console log.

Am I overlooking any necessary steps to ensure that the action index responds in json for my AngularJs controller?

Server log:

Started GET "/" for 127.0.0.1 at 2014-11-28 18:02:26 +0200
Processing by VisitorsController#index as HTML
   (0.4ms)  SELECT COUNT(*) FROM "users"
  User Load (0.2ms)  SELECT  "users".* FROM "users"  WHERE "users"."id" = 1  ORDER BY "users"."id" ASC LIMIT 1
   (2.1ms)  SELECT COUNT(*) FROM "users" INNER JOIN "relationships" ON "users"."id" = "relationships"."followed_id" WHERE "relationships"."follower_id" = $1  [["follower_id", 1]]
   (0.2ms)  SELECT COUNT(*) FROM "users" INNER JOIN "relationships" ON "users"."id" = "relationships"."follower_id" WHERE "relationships"."followed_id" = $1  [["followed_id", 1]]
  Rendered users/_stats.html.erb (4.8ms)
  Rendered visitors/index.html.erb within layouts/application (6.9ms)
  Rendered layouts/_navigation_links.html.erb (0.3ms)
  Rendered layouts/_navigation.html.erb (0.7ms)
  Rendered layouts/_messages.html.erb (0.0ms)
Completed 200 OK in 137ms (Views: 134.0ms | ActiveRecord: 2.9ms)

Answer №1

To resolve the issue, I made a change in my query from '/' route to '/users.json'. It's important to note that even using something like '/.json' will not be effective.

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

Browser local storage protection

Utilizing local storage to preserve specific data for my website has been beneficial. Each necessary object is stored so that users can access them on their browser (in chrome: Resource -> Local Storage). My objective now is to make these objects unrea ...

Using v-model with the input type files in Vue.js allows for easy two

Is there a way to retrieve data from v-model array in an input type of "file" that allows multiple selections? <input type="file" multiple v-model="modFiles[index]"> <input type="file" multiple v-model="modFiles[index]"> <input type="file" ...

What is the best way to declare a global TypeScript variable in a definition file to make it accessible for import?

My issue revolves around an external JS library that contains a global parameter: function Thing() { ... } ... var thing = new Thing(); I have a TypeScript definition file named thing.d.ts with the following content: declare var thing: ThingStatic; ex ...

Extracting data from a JSON format in Flask is a crucial task that can be

Can someone please help me with extracting data from JSON format? I am trying to create a search input in JSON and then retrieve information from MYSQLdb. Here is the data I have: {"result":[[21,"bogdan333","bogdan333",0,"","templates/UPLOAD_FOLDERp7.jpg" ...

Achieving consistent scroll position when utilizing the history.js library to navigate back with the click of a button

I need help implementing a feature that allows users to return to the same position on a webpage when clicking the back button. A common example is on ecommerce sites where if you scroll down, click on a product, then go back, you should be taken back to t ...

Tips for updating the background color when clicking in Vue

I've been attempting to change the background color of an element upon clicking it using Vue, but so far I haven't had any success. Here's what I have come up with, including a method that has two functions for the onclick event in Vue. &l ...

I'm wondering why my positive numbers aren't displayed in green and negative numbers in red

I am currently working on a commodities quotes widget. I have already set up the 'Current' and '24-hour' divs, but I'm facing an issue where positive values are not displaying in green and negatives in red as intended. I have check ...

Unlock the power of TypeScript's inheritance by utilizing static methods for type

In my TypeScript project, I have two classes: BaseModel and HotelModel. The HotelModel extends the BaseModel class, which provides static methods like findById, all, etc. export default class BaseModel { private collection:string _id:string | undefine ...

Tips for modifying a .json attribute's value by converting it to a string:

I have obtained a JSON file by reading it from a specific location and converting it into a string. In this case, the string variable holds an exact copy of the JSON displayed below, which I require for testing purposes. My objective is to update the valu ...

The length parameter for geometry.vertices in Three.js is not defined

Greetings, fellow members of the StackOverflow community. I have embarked on a journey to learn three.js, and for my learning project, I decided to recreate an 80's style retro hills scene reminiscent of this. Initially, everything was progressing smo ...

AngularJS updating paginated table with refreshed data following filter application

Here is an example that I am working on: https://jsfiddle.net/3noebzgr/1/ Everything in my project works well, except when I filter by jersey number, the pagination does not update accordingly. For instance, if I filter for jersey numbers 1-3, jersey 1 ap ...

How to handle multiple download events triggered by keyup in jQuery or JavaScript

When a URL is pasted into my input box (e.g. http://kotaku.com/some-article), through the use of paste() and keyup(), my CURL function retrieves the title, description, and images from that specific website and inserts them into my #content. POST-AJAX $( ...

"Encountering a glitch involving Vue.js 3, Pinia, and a centralized store

While using Pinia in a Vue.js 3 project, I encountered an issue. The problem arises when I attempt to load constant JSON structures from my backend using the file src/store/constants.store.ts // @ts-check import { defineStore } from "pinia" impor ...

Summernote information embedded with HTML elements

I just started using the summernote text editor and I'm trying to figure out how to extract the content from the textarea without all the HTML tags. This is what I have in my code: <textarea class="summernote" id="summernote" ng-model="blog.c ...

Setting the second tab as the primary active tab

I am currently working on a script that is well-known, and everything is functioning perfectly. However, I want to change it so that when the page is first opened, it displays the second tab instead of the first one (the first tab being a mail compose tab ...

Can you explain the distinction between res.render() and ejs.render() when used in a Node.js and Express application?

Incorporating the EJS template engine into my Node.js and Express application has been seamless so far, with no issues encountered. I have been utilizing its functionality and rendering capabilities consistently. However, I have noticed that I typically u ...

Creating a promise that is deferred using `$q.defer()` and is immediately

I'm in need of assistance with a hair-pulling issue! :) I am trying to send a series of calls to an API that I consume. To do this, I have created a factory with a function like: addItem : function(){ var deferred=$q.defer(); //call to the API ...

Why is ng-change not functioning properly, especially in conjunction with the Select element?

HTML <select ng-model="selectedName" ng-change="retrieveSelectedClass()" ng-options="(item.name||item) group by item.groupName for item in names" class="code-helper" id="code-helperId"> <option value="">Select Option</op ...

What is the best way to conceal two Bootstrap divs that should not both be visible at the same time?

I am working with two different types of charts: an Emotion chart and a Polarity chart. To control the visibility of these charts, I have implemented two buttons, one for each chart. The functionality is such that when the first button is clicked, only the ...

Creating Vue Components in PHP with no need for Webpack or Bundlers

Our company is currently in the process of incorporating Vue into our workflow, but we are facing challenges due to the lack of Javascript Build tools like Webpack. This means we cannot use Babel or Template Literals (`), making it difficult to define Comp ...