Angular.js not displaying array of objects retrieved from $http.get

Question

I am new to angular.js and I am trying to understand how to use the $http functions like $http.get and $http.post.

I have a very simple app retrieving messages from a MySQL database through a Java rest service. The data returned looks like:

[
  {id:1, content:"Hello World!"}, 
  {id:2, content:"Testing 1, 2, 3..."}, 
  {id:3, content:"I am from the database"}
]

I am attempting to list them using ng-repeat like so:

<div ng-controller="MessageController">
  <ul>
    <li ng-repeat="m in messages">{{m.content}}</li>
  </ul>
</div>

And then my controller looks like so:

function MessageController($scope, $http) {
  $scope.getAll = function(callback) {
    $http.get('/messages').success(function(response) { callback(response); });
  }

  $scope.messages = $scope.getAll(function(data) { return JSON.stringify(data); });
}

I see the call is properly returning an array of message objects and I can print them to the console from within the callback function but for some reason they are not being displayed in the ng-repeat. I was able to get this to work when I was manually creating a list of messages, but when I introduced the $http.get piece, it stopped working.

Am I missing something?

EDIT: I am using angular.js version 1.2.19

Did you try console.log-ing the response? Usually your data is on the data property of the response object in the $http callback. Try changing callback(response) to callback(response.data) — KhalilRavanna
– KhalilRavanna, Commented Sep 17, 2014 at 13:34
@KhalilRavanna I added a log statement in the get function ...console.log(response); callback(response);... and the JSON array I mentioned above is printed. When I tried response.data it printed undefined. — feenz
– feenz, Commented Sep 17, 2014 at 13:43
Thought it would be something simple like that. Looks like the answers below have it though. It's not updating because your function $scope.getAll doesn't actually return anything. You can either have that $scope method update $scope.messages itself or you can make $scope.getAll return $http.get and then inside of the success callback return callback(response). That way your $scope.getAll method returns a promise that will resolve with your evaluated callback. I believe that works. $resource also works but I abhor that service. — KhalilRavanna
– KhalilRavanna, Commented Sep 17, 2014 at 14:12

Benny Bottema · Accepted Answer · 2014-09-17 14:33:44Z

2

As per AngularJS version 1.2, arrays are not unwrapped anymore (by default) from a Promise (see migration notes). I've seen it working still with Objects, but according to the documentation you should not rely on that either.

Instead, you should use $resource for this. Resources don't return Promises anymore, but 'future' objects. In practice that means an empty object or array depending on the REST call, which fills itself once the REST call resolves (example).

In your case it would be something like the following (pseudo):

function MessageController($scope, $resource) {
    var resource = $resource('/messages');
    $scope.messages = resource.query(function (data) {
        return JSON.stringify(data); // is this really necessary, though?
    });
    // $scope.messages = resource.query(); // should be enough
}

You will need the ngResource module dependency for that (don't forget to include angular-resource.js in your index.html):

var app = angular.module('myApp', ['ngResource'])

edited Sep 17, 2014 at 14:33

answered Sep 17, 2014 at 14:04

Benny Bottema

11.6k11 gold badges76 silver badges108 bronze badges

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

1 Comment

feenz Over a year ago

I was able to get it working once I added the ngResource piece. Also, you were right JSON.stringify(data); was not necessary.

zszep · Accepted Answer · 2014-09-17 14:43:42Z

2

You should assign a value to the $scope.messages variable inside the the success function from the $get http call. Something like this: (see plunker)

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

app.controller('MessageController', function($scope, $http) {


  $scope.getAll = function() {
    $http.get('data.json').success(function(response) {
      $scope.messages = response;
    });
  }

  $scope.getAll();

});

edited Sep 17, 2014 at 14:43

answered Sep 17, 2014 at 14:38

zszep

4,4835 gold badges41 silver badges58 bronze badges

Comments

Razzildinho · Accepted Answer · 2014-09-17 13:48:55Z

1

I don't know why you're code isn't working but the following should work. The $scope is updated in the callback.

function MessageController($scope, $http) {
  $scope.getAll = function(callback) {
    $http.get('/messages').success(function(response) { callback(response); });
  }

  $scope.getAll(function(data) { $scope.messages = JSON.stringify(data); });
}

answered Sep 17, 2014 at 13:48

Razzildinho

2,5841 gold badge21 silver badges33 bronze badges

1 Comment

Sergiu Paraschiv Over a year ago

Pretty obvious why his code does not work. $scope.getAll does not return anything, so regardless of what's happening inside of it $scope.messages will be undefined. The data returned by the callback is only accessible inside the scope of the caller (the success method of $http). And the caller does nothing with it. It would be also useless if success would return the result because it would return it after the async $http call.

T D Nguyen · Accepted Answer · 2016-04-13 22:44:16Z

0

I resolve with:

After the call, initializing a variable
```
$scope.myRender = false;
```
Then do the call... after and success:
```
$scope.myRender = true;
```

and the html use ng-if="myRender" ng-model="myModel"

Good luck!

edited Apr 13, 2016 at 22:44

T D Nguyen

7,7337 gold badges56 silver badges80 bronze badges

answered Apr 13, 2016 at 21:53

David Castro

2,04523 silver badges24 bronze badges

Collectives™ on Stack Overflow

Angular.js not displaying array of objects retrieved from $http.get

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related