Amelia Earheart Amelia Earheart - 6 months ago 11
AngularJS Question

not able to pass data to a data object in angularjs

N.B: I'm pretty much new to angularJS programming. What I'm trying to do is, to save info returned by a service to an object. My object looks like this.

var userObject = {
"id": "1",
"firstName": "Amelia",
"lastName": "Earheart"
};


I have a factory that returns data from back end and it looks like this:

.factory('myService', function($http) {
var baseUrl = 'backendservice/';

return {
myInfo:function() {
return $http.get(baseUrl + 'getmyInfo');
}
};
})


And this is how my Controller communicates with the factory service:

.controller('myController', function($routeParams,myService) {
var my = this;

my.basicInfo = function () {
//to get my info
myService.myInfo().success(function(data) {
my.activeUser.myData.id = data.id;
my.activeUser.myData.firstName = data.firstName;
my.activeUser.myData.lastName = data.lastName;
});
};


my.addSomething = function(post) {
var userObject = my.basicInfo();

};

});


and this is how I assign the data to
userObject


var userObject = my.basicInfo();


I don't know why it's not working. Factory service runs but the value is not assigned to userObject.

My Controller as whole looks like this:

(function() {
angular
.module('myApp.spa', [])

.factory('myService', function($http) {
var baseUrl = 'backendservice/';

return {
myInfo:function() {
return $http.get(baseUrl + 'getmyInfo');
}
};
})

.controller('myController', function($routeParams,myService) {
var my = this;

my.basicInfo = function () {
//to get my info
myService.myInfo().success(function(data) {
my.activeUser.myData.id = data.id;
my.activeUser.myData.firstName = data.firstName;
my.activeUser.myData.lastName = data.lastName;
});
};


my.addSomething = function(post) {
var userObject = my.basicInfo();

};

});
})();

Answer

Reason is my.basicInfo does not return anything and also from $http.success/failure, you can not return any value. So in this case, following steps you would have to do:

  1. Define var userObject at the top of your controller so that can be accessible to all the methods.
  2. Assign data to userObject inside success callback of $http

    (function() { angular .module('myApp.spa', [])

        .factory('myService', function($http) {
            var baseUrl = 'backendservice/';
    
            return {
                myInfo:function() {
                    return $http.get(baseUrl + 'getmyInfo');
                }
            };
        })
    
        .controller('myController', function($routeParams,myService) {
            var my = this;
            var userObject;
    
            my.basicInfo = function () {
                    //to get my info
                    myService.myInfo().success(function(data) {
                        my.activeUser.myData.id             = data.id;
                        my.activeUser.myData.firstName  = data.firstName;
                        my.activeUser.myData.lastName   = data.lastName;
    
                        userObject = data;
                    }); 
            };
    
    
            my.addSomething = function(post) {
                my.basicInfo();
    
            };
    
        });         
    

    })();