How to fill variable with values by service (AngularJS)

Question

My variable has no value after calling the service. I defined the success function as a separate function and called it in the .then() method, here's the code:

// Code inside the Ctrl:
var successData = null;
vm.fillVar = null;
vm.loadData = loadData;

// service func
function loadData() {
   return $timeout(function () {
      vm.fillVar = vm.fillVar || [];

      if (vm.fillVar == undefined || vm.fillVar.length == 0) {
          CrudSvc.GetAllData().$promise.then(success, error);

          console.log('Success Variable: ', successData); //--> here, the successData variable contains no data
          vm.fillVar = successData;
          console.log('fillVar for the view: ', vm.fillVar); //--> fillVar is empty, why??
      }
   }, 500);
}

// success func
function success(res) {
   console.log('var res: ', res); //--> res contains data
   successData = res;
   console.log('success func: ', successData); //--> the variable contains data
}

I don't understand why the successData variable is empty after calling the success function. It is a bit confusing... Has anyone a solution for this issue?

Why don't you just set vm.fillVar inside function success and avoid using successData variable — codtex
– codtex, Commented Apr 6, 2017 at 8:39
you are expecting synchronous execution out of asynchronous call. Hope you know the core JS — NiRUS
– NiRUS, Commented Apr 6, 2017 at 8:42
@sand Because I want to use the success-method also for other services in the same controller and it is better to read. — yuro
– yuro, Commented Apr 6, 2017 at 8:48

codtex · Accepted Answer · 2017-04-06 09:32:35Z

3

This code is async CrudSvc.GetAllData().$promise.then(success, error); so if you want to execute something after that you should change your code to:

CrudSvc.GetAllData().$promise.then(success, error).then(function(){
     // this code is executed after all the previous code is done and succeed
     console.log('Success Variable: ', successData); 
     vm.fillVar = successData;
     console.log('fillVar for the view: ', vm.fillVar); 
});

You can read about then chaining HERE

The then method returns a Promise which allows for method chaining.

EDIT

If you want to handle error situation simply use reject function like this:

CrudSvc.GetAllData().$promise.then(success, error).then(function(){
     // this code is executed if previous success 
}, function(){
     // this code is executed if previous error
}); // This is how you do further error handling via this approach

edited Apr 6, 2017 at 9:32

answered Apr 6, 2017 at 8:42

codtex

6,5882 gold badges21 silver badges37 bronze badges

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

3 Comments

yuro Over a year ago

What is, when an error is expected? I defined the err variables in error function, which will show the error in the view immediately.

yuro Over a year ago

thanks for your support. Currently is this a good approach :)

codtex Over a year ago

You are welcome, I'm glad that this code helped you :)

kaushlendras · Accepted Answer · 2017-04-06 08:44:44Z

0

// Code inside the Ctrl:
var successData = null;
vm.fillVar = null;
vm.loadData = loadData;

// service func
function loadData() {
   return $timeout(function () {
      vm.fillVar = vm.fillVar || [];

      if (vm.fillVar == undefined || vm.fillVar.length == 0) {
          CrudSvc.GetAllData().$promise.then(function(response) {
successData = response;
    console.log('Success Variable: ', successData); //--> here, the success variable now contains no data
          vm.fillVar = successData;
          console.log('fillVar for the view: ', vm.fillVar); //--> fillVar is empty, why??
}, function(error) {
});


      }
   }, 500);
}

answered Apr 6, 2017 at 8:44

kaushlendras

2201 silver badge7 bronze badges

1 Comment

yuro Over a year ago

That solution I already know. But not the expected solution I am looking for. However thanks for your support :)

Collectives™ on Stack Overflow

How to fill variable with values by service (AngularJS)

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related