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

Answer 1

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'])

Answer 2

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

Answer 3

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

});

Answer 4

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!