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?

Maxim Shoustin · Accepted Answer · 2017-05-07 11:17:11Z

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

thanks for the quick answer. But i still got an Object { $$state: Object }. Not sure what is wrong. I try to figure it out.
Its also in the JSFiddle. console.log($scope.data) is also an Object { $$state: Object }.

Sachila Ranawaka · Accepted Answer · 2017-05-07 11:04:37Z

0

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);

    });
})

answered May 7, 2017 at 11:04

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

1 Comment

Maxim Shoustin Over a year ago

SO asks to get value but not promise like in your case. However this solution will work too. Just case of where do you want to resolve it in Service or in Controller

Daouda · Accepted Answer · 2018-04-19 10:50:29Z

0

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

answered Apr 19, 2018 at 10:50

Daouda

1119 bronze badges

Collectives™ on Stack Overflow

Use a async function from the angularjs factory

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related