How to get data from Angularjs Service Response to Controller Scope Object

Question

I am having simple Angularjs 1.7 app. Everything works fine and I am able to fetch data from web API to angularjs service. When I debug on Angularjs service I can see that data is being fetched from database via Web API. So I am using the service inside angularjs controller to fetch the data into scope object. But I am not sure why the data is not being fetched in controller scope object. Is there anything that I am missing to fix it.

Service.js

(function () {

    var app = angular.module('myApp');

    app.factory('websiteService', function ($http, $q) {
        var factory = [];
        var deferred = $q.defer();
        var baseURI = 'http://localhost:59029/api';

        factory.getAllStudents = function () {
            $http({
                method: 'GET',
                url: baseURI + '/Website/GetAllStudents'
            }).then(function (response) {
                deferred.resolve(response);
            }, function (error) {
                deferred.reject(error);
            });
            return deferred.promise;
        }

        return factory;
    });
})();

Controller.js

(function () {

    var app = angular.module('myApp');

    app.controller('websiteController', ['$scope', '$http', 'websiteService', '$filter',
        function ($scope, $http, websiteService, $filter) {
            $scope.TestWebsite = "TestWebsite";
            console.log($scope.TestWebsite);

            //GET Students
            websiteService.getAllStudents()
                .then(function (response) {
                    $scope.FetchedAllStudents = response;
                    // NOT ABLE TO FETCH THE DATA HERE
                }, function (error) {
                    // error handling here
                });
        }
    ]);
})();

The deferred API is pretty antiquated. You can simply have getAllStudents() return $http.get(baseURI + '/Website/GetAllStudents'), the result of which is a promise, and avoid the cruft around resolving and rejecting. — miqh
– miqh, Commented Oct 10, 2019 at 0:16
so means like this inside controller websiteService.getAllStudents() — sgl
– sgl, Commented Oct 10, 2019 at 0:18
Yes—there's no need to change how you're handling the service call in your controller. Although, even with this change, I can't see why you're not getting anything in the response argument. — miqh
– miqh, Commented Oct 10, 2019 at 0:23

georgeawg · Accepted Answer · 2019-10-10 03:09:03Z

1

There is no need to manufacture a promise with $q.defer as the $http service already returns a promise:

app.factory('websiteService', function ($http, $q) {
    var factory = [];
    ̶v̶a̶r̶ ̶d̶e̶f̶e̶r̶r̶e̶d̶ ̶=̶ ̶$̶q̶.̶d̶e̶f̶e̶r̶(̶)̶;̶
    var baseURI = 'http://localhost:59029/api';

    factory.getAllStudents = function () {
        return $http({
            method: 'GET',
            url: baseURI + '/Website/GetAllStudents'
        }).then(function (response) {
            return response.data;
        });
    }
    return factory;
});

For more information see Is this a "Deferred Antipattern"?

answered Oct 10, 2019 at 3:09

georgeawg

49k13 gold badges78 silver badges98 bronze badges

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

Collectives™ on Stack Overflow

How to get data from Angularjs Service Response to Controller Scope Object

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related