How to store result from POST request to use in another controller in Ionic and Angular

Question

Okay so I am trying to use promises for the first time so bear with me. This question builds upon my question How to pass results from POST request to another page in Ionic and Angular . In essence I'm doing rudimentary user authentication and I created a service to make post requests to a database to confirm valid login information was entered. What I would like to do is store the response from the POST request in an array that I can later access in my profile page so that I can display the user's information. But I'm having a hard time storing the promise in a variable without messing up the result in the controller (success doesn't print).

controller.js

 UserProfile.getProfile(userData).success(function(profile) {
          $scope.uProfile = profile;

          //invaid input
          if ($scope.uProfile == null) {
            alert('Invalid Credentials Entered');

            //refresh the page
            $window.location.reload();
          }
          else {
            var uProfile = $scope.uProfile;
            console.log("success");
            //console.log(uProfile);
           // $state.go('tab.profile',{usrProfile: uProfile}); //Moveto the profile page
          }

services.js

.factory('UserProfile',function($http) {

  var profileInfo = {};
  var profiles = [];

     return {
         getProfile: function(data) {
          console.log("in service");
           var url = 'https://cs496-app3.herokuapp.com/api/person/login/';
           var obj = {
                'email_address': data.email,
                'password': data.password
            };

         $http.post(url, obj)
          .then(function(result){
            profiles[0] = result;
            console.log(profiles[0]);
            return profiles[0];
          })
         // console.log(profiles[0]);
       }
      };

});

When I change my service to simply

return $http.post(url, obj)

everything works fine but then I can't access the result from the post later on in another controller. How can I store the promise?

Answer 1

Replace your services.js with the below code

.factory('UserProfile',function($http) {

  var profileInfo = {};
  var profiles = [];
  var getProfile = function(data) {
          console.log("in service");
           var url = 'https://cs496-app3.herokuapp.com/api/person/login/';
           var obj = {
                'email_address': data.email,
                'password': data.password
            };
            $http.post(url, obj)
                        .then(function(result){
                                profiles[0] = result;
                                console.log(profiles[0]);
                /***********removed and placed below********************/
                        })
             return profiles[0];
            // console.log(profiles[0]);
    }
     return {
         getProfile:getProfile
      };

});

Explanation : As per your code you have

$http.post(url, obj)
          .then(function(result){
                  profiles[0] = result;
                  console.log(profiles[0]);
                  return profiles[0];
})

return is inside the then function and it is not returned by the factory method. By default angular factory should return one promise. So

return profiles[0];

having it outside the http.post will work out. The format of your implementation is changed as a good practice but not mandatory