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

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

• javascript
• angularjs

Share Improve this question Follow edited Sep 17, 2014 at 14:25 feenz asked Sep 17, 2014 at 13:29 feenzfeenz 9733 silver badges1010 bronze badges 3

• 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 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 Commented Sep 17, 2014 at 13:43
• 1 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 Commented Sep 17, 2014 at 14:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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'])

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();

});

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); });
}

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!