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

2

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"]

edited Nov 22, 2014 at 18:24

answered Nov 22, 2014 at 7:09

Dan Fairaizl

2,1802 gold badges29 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dylan Richards Over a year ago

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).

Dan Fairaizl Over a year ago

@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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related