Use a async function from the angularjs factory

Question

I want to use the first customer of my customers in my Controller, but its not working. What i want is to retrieve my first customer in a factory service and then use it in my Controller.

.factory("CustomerService", ["$resource", function($resource) {
      return $resource('js/customers.json');
   }])

   .factory("FirstCustomer", ["CustomerService", function(CustomerService) {
      var customer;
      customer = CustomerService.query().$promise.then(function(info) {
         console.log(info[0]); // This works
         return info[0];
      });
      console.log(customer); //This doesnt
      return {
         value: customer
      };
   }])

   .controller('CustomerController', function($scope, FirstCustomer) {
      $scope.customer = FirstCustomer.value;
      console.log($scope.customer); // Shows Object { $$state: Object }
   })

I know that Object { $$state: Object } means, that the Object could not be resolved in time. But how can i do this?

Answer 1

The value should be function.

In your case when you call $scope.customer = FirstCustomer.value; you immediately go to console.log($scope.customer); because you get object.

Make value to be a function and promise resolving will happen properly.

I would write factory as:

.factory("FirstCustomer", ["CustomerService", function(CustomerService) {
            var customer;

      var factory = {  
        value: function () {                
            var customer = CustomerService.query().$promise.then(function(info) {     
            return info[0];
           });

          return customer;
        }     
      };
      return factory; 
    }])

---

2nd option (shorter)

.factory("FirstCustomer", ["CustomerService", function(CustomerService) 
{
  var customer;   

 return {
   value: function(){
          customer = CustomerService.query().$promise.then(function(result) {                 
              return result.data.results[0];
          });
          return customer;
          }        
     };
 }])

Usage:

$scope.customer = FirstCustomer.value(); 

Similar Demo in Fiddle

Answer 2

catch the result in the controller like this

.controller('CustomerController', function($scope, FirstCustomer) {
    FirstCustomer.value().then(function(info) {
        $scope.customer = info
        console.log($scope.customer);

    });
})

Answer 3

try this:

.controller('CustomerController', async function($scope, FirstCustomer) {
      $scope.customer = await FirstCustomer.value;
      console.log($scope.customer); // Shows Object { $$state: Object }
   })

use async await from ES6 javascript