AngularJS controller using factory function

Question

I have a following code where controller use factory function to get user data via an api request.

controller

myApp.controller('UserApiCtrl', function($scope,$auth,Account){

    $scope.getProfile = function(){
        Account.getProfile()
            .then(function(response){

                $scope.user = response.data;

            })

            .catch(function(response){
                // errors handled here
            })
    };

    $scope.getProfile();

})

factory

angular.module('MyApp')
    .factory('Account', function($http){
        return {
            getProfile: function(){
                return $http.get('/api/me');
            }
        }
    });

Now in controller when I console.log(response.data), json data is available, but when I console.log($scope.getProfile()) it's undefined.

Thanks!!

Because your function is not returning any value. You should return the values/object on success callback. — Vineet
– Vineet, Commented Sep 23, 2015 at 12:51
the call Account.getProfile() is async, and your call to the $scope.getProfile() will not wait till the call back is executed. Even if you return something in the callbak, there is no one to catch it. — Thangadurai
– Thangadurai, Commented Sep 23, 2015 at 13:01
This looks to be normal, expected behavior with async functions. The entire point of an async function is to allow your code to continue to do other work while waiting for something (in this case, a response from the server). Anything in the .then block is going to happen in the future, anything outside happens now, You can't log now something that you expect to happen in the future. — Claies
– Claies, Commented Sep 23, 2015 at 13:12
in the case of angular, because angular creates an event watcher on $scope, when the future event finishes ($scope.user is populated with a value), then angular will run a $digest and update the DOM. — Claies
– Claies, Commented Sep 23, 2015 at 13:16

Chetan Sharma · Accepted Answer · 2015-09-23 13:19:51Z

1

Here is the answer, read the below point to understand the concept.

You are assigning value into scope variable $scope.user , So you can do logging for it.
You are getting response back in success, so again you can log here also.

But when you try to log console.log($scope.getProfile()) , it is not going to return anything. In angular every thing you can keep in scope object.

answered Sep 23, 2015 at 13:19

Chetan Sharma

3322 silver badges12 bronze badges

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

1 Comment

d3bug3r Over a year ago

This make sense.. Thanks

Sarjan Desai · Accepted Answer · 2015-09-23 13:00:18Z

0

If you get response.data then below code should work fine.

myApp.controller('UserApiCtrl', function($scope,$auth,Account){
    $scope.user = {}; // Change to [] if response.data is array
    $scope.getProfile = function(){
        Account.getProfile()
        .then(function(response){
            $scope.user = response.data;
            console.log($scope.user);
        })
        .catch(function(response){
                // errors handled here
            })
    };
    $scope.getProfile();
});

answered Sep 23, 2015 at 13:00

Sarjan Desai

3,7332 gold badges21 silver badges32 bronze badges

4 Comments

d3bug3r Over a year ago

It return me an empty Object{}.

Thangadurai Over a year ago

@novavent, try logging the response.data also, if you are getting valid value, then for sure you should get data for $scope.user also.

d3bug3r Over a year ago

Inside the function I can get the json data, but only outside when I log the getProfile() I get nothing but undefined/Object {}. Anyway my view still able to use data from the $scope.

Sarjan Desai Over a year ago

You will not get. As suggested by @Thangadurai. getProfile method is Async. You can use it only after getting success or failure response.

Collectives™ on Stack Overflow

AngularJS controller using factory function

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related