Transferring Data between Rails and Angularjs using JSON

Question

Transferring Data between Rails and Angularjs using JSON

Utilizing Angularjs to fetch JSON data from a Rails test app deployed on Heroku is proving to be a bit challenging. Below you can find the snippets of my Angular and Rails code.

An error message displayed in my Firebug console reads: "NetworkError: 404 Not Found - "

Any insights on why this setup isn't functioning correctly?

Angularjs code

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('http://desolate-earth-2852.herokuapp.com/declarations.json')
       .then(function(res){
          $scope.todos = res.data;        
        });
});

Rails code

  def index
    @declarations = Declaration.all

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @declarations }
    end
  end

Route Configuration

Test::Application.routes.draw do
  root :to => 'welcome#index'
  get "welcome/index"
  resources :declarations
end

javascript ruby-on-rails json angularjs heroku

Answer 1

Answer №1

One possible reason for the issue could be due to Rails JS minification. This topic is covered by Ryan Bates in his Railscast on integrating AngularJS. It appears that you haven't accounted for minification in your configuration files, which means all Dependency Injection in your Angular code should be structured within an array like the example below:

App.controller('TodoCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('http://desolate-earth-2852.herokuapp.com/declarations.json')
    .then(function(res){
       $scope.todos = res.data;        
    });
}]);

As opposed to this approach:

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('http://desolate-earth-2852.herokuapp.com/declarations.json')
   .then(function(res){
      $scope.todos = res.data;        
   });
});

By specifying dependencies in an array, AngularJS can properly handle changes in names during minification without any issues. This practice should be applied to every function that utilizes services, such as the controller creation function demonstrated here.

Answer 2

One possible reason for the issue could be due to Rails JS minification. This topic is covered by Ryan Bates in his Railscast on integrating AngularJS. It appears that you haven't accounted for minification in your configuration files, which means all Dependency Injection in your Angular code should be structured within an array like the example below:

App.controller('TodoCtrl', ['$scope', '$http', function($scope, $http) {
  $http.get('http://desolate-earth-2852.herokuapp.com/declarations.json')
    .then(function(res){
       $scope.todos = res.data;        
    });
}]);

As opposed to this approach:

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('http://desolate-earth-2852.herokuapp.com/declarations.json')
   .then(function(res){
      $scope.todos = res.data;        
   });
});

By specifying dependencies in an array, AngularJS can properly handle changes in names during minification without any issues. This practice should be applied to every function that utilizes services, such as the controller creation function demonstrated here.

Transferring Data between Rails and Angularjs using JSON

Angularjs code

Rails code

Route Configuration

Answer №1

Similar questions

Trouble with Angular Charts: Data Reading Issue

Stop receiving notifications for channel events in Stream with the GetStream.io Chat API

Vue Deep Watcher fails to activate when the data is altered

Acquire information using Vue through HTTP requests based on Router parameters

Connected with the functionalities of Umbraco Forms

Customize the appearance of the Vue.js datepicker starting from today's date

After the data has finished loading, AngularJS will apply the directive to each select tag every time

What are the steps to setting up Webpack-simple with Vue Cli 3?

Guide to Repairing Uncaught TypeError: players.setAttribute is not a recognized method?

Tips for properly formatting the sort_by parameter in Cloudinary to avoid errors

What is the best way to connect an external JSON file to an Angular controller?

Creating a bot that will only respond once when a user sends multiple photos simultaneously

How to use jquery and ajax to retrieve an array of data and show it on the screen

What is the maximum size allowed for arrays in QJson?

A single Rails route that serves up distinct queries in both HTML and JSON formats

Simple HTML files on a local server are having trouble loading images and JavaScript, yet the CSS is loading

Asynchronous Task paired with JSON, the onSuccess method fails to provide any returns

Discovering the world of Javascript and JQuery by diving into the intricacies of

The socket.rooms value is updated before the disconnection listener finishes its process

ScriptManager is not accessible in the current ASP.Net Core Razor Page context