Get empty model from backend in angularjs factory and update controller variable upon success

Question

This is my factory and in my factory http call I am assigning value to my User variable but it is not updating my controller.

mainApp.factory('AccountFactory', ['$http', function ($http) {
                var User = {

                };

                function getLogOnModel() {
                    $http.get("http://localhost/mylocalspecial/Account/LogOn").then(function (data) {
                        User = data.data;
                        alert(JSON.stringify(data.data));
                        return data;
                    });
                }

                // Init model (or leave it for the controller to init it)
                getLogOnModel();

                return {
                    User: User,
                    getLogOnModel: getLogOnModel
                };

            }]);

This is my controller as you can see in my controller I am assigning factory User variable to $scope.logOnModel but my controller is not updating.

mainApp
        .controller('AccountController', ['$scope', 'AccountFactory',
            'AuthenticationServiceFactory'
            , function ($scope, AccountFactory,
                AuthenticationServiceFactory) {

                $scope.logOnModel = {};
                $scope.customerModel = {};

                $scope.logOnModel = AccountFactory.User;
                alert(JSON.stringify(AccountFactory.User));



            }]);

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

This is what happens:

// 1
var User = {};   // local User variable references new object: #obj1

// 2
return { 
    User: User   // AccountFactory.User references same object: #obj1
    ...
}

// 3
User = data.data;   // local User variables references new object: #obj2
                    // AccountFactory.User still references old object: #obj1
                    // $scope.logOnModel still references AccountFactory.User
                    //     a.k.a. old object: #obj1

Solution 1:

Do not reassign the whole object (User = <some_new_object>), just reassign its properties:

User.prop1 = data.data.prop1;
User.prop2 = data.data.prop2;
...

(This is tedious and error-prone if the properties are more than a couple.)

Solution 2:

You could assign the whole service to a scope property and reference it from the scope.

mainApp.factory('AccountFactory', ['$http', function ($http) {
    var service = {};
    service.User = {};
    service.getLogOnModel = function () {
        $http.get("...").success(function (data) {
            service.User = data;
            alert(JSON.stringify(data));
        });
    };

    // Init model (or leave it for the controller to init it)
    service.getLogOnModel();

    return service;
}]);

mainApp.controller('AccountController', ['$scope', 'AccountFactory',
    function ($scope, AccountFactory) {
        $scope.account = AccountFactory;
        ...
    }
]);

// In HTML:
{{account.User.EmailAddress}}

See, also, this short demo.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 7, 2014 at 12:37

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

3 Comments

Atul Chaudhary Over a year ago

Solution 2 looks good but doesn't work on page load. When my page load email is blank and when i refresh my page I get the value. I observed the same issue with provided js fiddle as well. My requirement is to get the value on page load..sorry for being pain in the neck..

gkalpak Over a year ago

A modified version of the fiddle that loads the data on age load. It just a mattr of calling the function that fetched the data (like the code in my answer, which immediately calls service.getLogOnModel();).

Atul Chaudhary Over a year ago

Thanks a lot that solved my problem and I like solution 2 as in that i don't have to map my properties manually. Now i m just getting the data model from my backend and serving the view only reason why I am doing this is to keep my backend model in sync with front end. Regards

Collectives™ on Stack Overflow

Get empty model from backend in angularjs factory and update controller variable upon success

1 Answer 1

Solution 1:

Solution 2:

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution 1:

Solution 2:

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related