Unable to retrieve data via $http and promise with AngularJS

Question

I'm trying to interact with my RESTful API in my AngularJS app. When I do so, no data displays in my view.

I must be misunderstanding how to use $http + promises. Any ideas what's wrong?

Here is my factory:

angular.module('mycompany.resources').factory('Forms', ['$http', '$q', function($http, $q) {
    var Forms = {};

    Forms.all = function() {
        var deferred = $q.defer();
        $http.get('/api/forms.json').then(function(response) {
            console.log(response.data);
            return response.data;
        });
        return deferred.promise;
    };

    return Forms;
}]);

and my controller:

angular.module('mycompany.admin.forms').controller('formListController', ['$scope', 'Forms', function($scope, Forms) {
    'use strict';

    $scope.forms = Forms.all();
}]);

and my template:

<div ng-controller="formListController">
    <ul class="form-list">
        <li ng-repeat="form in forms">
            <a class="form" href="#/forms/{{form._id}}">
                <span class="title">{{form.title}}</span>
                <span ng-if="form.lastPublished">Last published {{form.lastPublished | date:'M/d/yy'}}</span>
            </a>
        </li>
    </ul>
</div>

However, if I hardcode data onto the scope, I see data:

angular.module('mycompany.admin.forms').controller('formListController', ['$scope', 'Forms', function($scope, Forms) {
    'use strict';

    $scope.forms = [
        {
            "_id": "530f69046c5a65ed1b5a3809",
            "archived": false,
            "lastPublished": new Date("2014-02-20 14:21:09 UTC"),
            "title": "New Student Registration (2014 - 2015)"
        }
    ];
}]);

I understand from this example and this article that I should be able to rely on promises while fetching data in my controller via $scope.forms = Forms.all().

What version of AngularJS are you using?

Rich
– Rich

2014-02-28 19:35:11 +00:00
Commented Feb 28, 2014 at 19:35 — Rich
– Rich, Commented Feb 28, 2014 at 19:35

Ajay Singh Beniwal · Accepted Answer · 2014-02-28 19:48:40Z

2

I think you should simplify your source code a bit similar to below

angular.module('mycompany.resources').factory('Forms', ['$http', '$q', function($http, $q) {
    var Forms = {};

    Forms.all = function() {

      return  $http.get('/api/forms.json')

    };

    return Forms;
}]);

angular.module('mycompany.admin.forms').controller('formListController', ['$scope', 'Forms', function($scope, Forms) {
    'use strict';

     Forms.all().then(function(data){$scope.forms=data;});
}]);

answered Feb 28, 2014 at 19:48

Ajay Singh Beniwal

19k11 gold badges84 silver badges100 bronze badges

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

Comments

Rich · Accepted Answer · 2014-02-28 19:57:28Z

In AngularJS 1.2 they removed the feature to automatically unwrap promises in view templates.

You can re-enable the feature with $parseProvider.unwrapPromises(true), although this will become deprecated eventually so it is better to alter your patterns.

Forms.all = function($scope, binding) {
        return $http.get('/api/forms.json').then(function(response) {
            console.log(response.data);

            $scope[binding] = response.data;

            return response.data;
        });
    };


Forms.all($scope, 'forms');

http://docs.angularjs.org/guide/migration#templates-no-longer-automatically-unwrap-promises

Edit

Looking over your factory again, you are creating an unnecessary deferred object, that also never is resolved. $http.get already returns a promise so you'd just return that. So depending on your AngularJS version you might only need to just return the result of $http.get instead of re-writing the function to bind the actual data to your scope.

Collectives™ on Stack Overflow

Unable to retrieve data via $http and promise with AngularJS

2 Answers 2

Comments

Edit

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Edit

Comments

Your Answer

Sign up or log in

Post as a guest

Related