Angular $http request not returning Rails resource

Question

I'd like to get a JSON object of all the posts in my database.

Here's the module:

angular .module('AngularRails', [ 'ngRoute', 'templates' ]).config(function($routeProvider) { $routeProvider .when('/', { templateUrl: 'home.html', controller: 'HomeCtrl' }); });

A controller:

angular.module('AngularRails') .controller('PostsController', function($scope, $http) { var posts = $http.get('/posts.json').success(function(data){ return data; }); $scope.posts = posts; });

The view:

<h1>The Home View!</h1> <ul> <li ng-repeat='post in posts'> {{ post.title }} </li> </ul>

When I check the console, I can see that the request is made to the specified URL (and can see the JSON I want), but it's buried deeply within some large object.

How can I display the posts in an unordered list?

Edit

As per Dan's suggestion, I've changed the controller to this:

angular.module('AngularRails') .controller('PostsController', function($scope, $http) { $http.get('/posts.json').success(function(data) { $scope.posts = data; }); });

No cigar.

Could you please post the response ?

cthulhu
– cthulhu

2014-11-22 13:49:52 +00:00
Commented Nov 22, 2014 at 13:49 — cthulhu
– cthulhu, Commented Nov 22, 2014 at 13:49

Dan Fairaizl · Accepted Answer · 2014-11-22 18:24:35Z

The data you are looking for will be passed as a parameter to the success callback from $http. $scope.posts in your example is the entire http object. Try something like this:

angular.module('AngularRails').controller('PostsController', function($scope, $http) { $http.get('/posts.json').success(function(postData, status, headers, config){ $scope.posts = postData; // this is the JSON from the web request }); // $scope.posts = posts; <-- this was the $http promise object });

Example

Rails controller:

def list posts = { posts: %w(post1 post2 post3 post4) } # Or ActiveRecord query etc... respond_to do |format| format.json { render json: posts } end end

Angualr controller:

$http.get('http://localhost:3000/posts/list.json').success (data) -> $scope.posts = data.posts console.log $scope.posts // ["post1", "post2", "post3", "post4"]

Hey, Dan! Thanks for your suggestion, but this doesn't seem to work. I updated the original post with what I tried. I did attempt to use the rest of the parameters, but I'm pretty sure it can be shortened to one (correct me if I'm wrong).
@DylanRichards I've updated the answer with a better example, it would probably be useful to see what you are doing on the rails side but this should help. Also you are correct, the extra parameters in the success callback are not needed - that was just for illustration. Let me know if helps! (the js here is coffeescript!)

Collectives™ on Stack Overflow

Angular $http request not returning Rails resource

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related