Pass a variable between two functions in a same controller

Question

I define a variable by the name tst in controller, and i give some value in a function by the name GetOrders, but when i get tst in another function GetTotalValueOfProducts it is undefined and does not have value,this is what i do:

<script>
 app.controller('OrderController', function ($scope, $http) {
    $scope.quantity = 1;
    $scope.Orders = {};
    var tst ;
    GetOrders = function () {
        $http.get('/Order/GetAllOrders').success(function (response) {
            $scope.Orders = response;
            //here i set tst, and tst has value, i checked it has value and it's not undefined
            tst = response;

        });
    }
    GetOrders();

    GetTotalValueOfProducts = function () {
       //but here 'tst' is undefined!!!
        var p = tst;

    }
    GetTotalValueOfProducts();
  });
 </script>

What is the problem?

`$http.get` is async, this will not work. You need to work with the promise. — MinusFour, Nov 22 '15 at 15:15
http://stackoverflow.com/questions/13088153/how-to-http-synchronous-call-with-angularjs this too — Madhurendra Sachan, Nov 22 '15 at 15:19
A side note:You are defining global variables GetOrders and GetTotalValueOfProducts, but I think you intend to define local functions. You can do this in two ways: (1) Insert the `var` keyword: `var GetOrders = function() { ...`, _or_ (2) Use function declaration notation: `function GetOrders () { ...` — www.admiraalit.nl, Nov 22 '15 at 15:21

score 1 · Answer 1 · answered Nov 22 '15 at 15:15

This is happening because js is asynchronous.

You are executing GetOrders() as it is making http request, which will take time but before that http request finishes you are calling GetTotalValueOfProducts which makes it undefined.

<script>
 app.controller('OrderController', function ($scope, $http) {
    $scope.quantity = 1;
    $scope.Orders = {};
    var tst ;

    GetTotalValueOfProducts = function () {
       //but here 'tst' is undefined!!!
        var p = tst;

    }

    GetOrders = function () {
        $http.get('/Order/GetAllOrders').success(function (response) {
            $scope.Orders = response;
            //here i set tst, and tst has value, i checked it has value and it's not undefined
            tst = response;
           GetTotalValueOfProducts();

        });
    }
    GetOrders();



  });
 </script>

The above should give you expected result. Not sure when you want to call the function.

score 1 · Answer 2 · answered Nov 22 '15 at 15:15

Hi There AngularJS is all async so GetTotalValueOfProducts(); is getting called before success callback return any value from http. You have to call your function once the callback is completed.

You can use $q of AngularJS to accomplish it. Here is the link $q

score 1 · Answer 3 · answered Nov 22 '15 at 15:16

1

This is a classic JavaScript async problem. Your second function is executed before the promise in the first function is resolved.

answered Nov 22 '15 at 15:16

Robert Moskal

21,737
8
62
86

With 5k+ reputation, one would think you know what a "duplicate" is, how to mark it as such and how to vote for that. – Ingo Bürk Nov 22 '15 at 15:17

score 0 · Answer 4 · answered Nov 22 '15 at 15:17

You should call

  GetTotalValueOfProducts();

in success callback of $http service. Change the code like this

  <script>
     app.controller('OrderController', function ($scope, $http) {
       $scope.quantity = 1;
       $scope.Orders = {};
       GetOrders = function () {
         $http.get('/Order/GetAllOrders').success(function (response) {
         $scope.Orders = response;
         GetTotalValueOfProducts(response)
        });
       }
      GetOrders();

      GetTotalValueOfProducts = function (tst) {
        var p = tst;
      }

     });
 </script>

vorillaz · Answer 5 · 2015-11-22T15:21:25.323

Try attaching tst variable into your inner $scope object. EDIT It was sloppy not seeing that these function are async. You should fetch your results as:

Try attaching tst variable into your inner $scope object. EDIT It was sloppy not seeing that these function are async. You should fetch your results as.

app.controller('OrderController', function ($scope, $http) {
  $scope.quantity = 1;
  $scope.Orders = {};
  $scope.tst;
  GetOrders = function () {
      $http.get('/Order/GetAllOrders').success(function (response) {
          $scope.Orders = response;
          $scope.tst = response;
          GetTotalValueOfProducts();
      });
  }
  GetOrders();

  GetTotalValueOfProducts = function () {
     //but here 'tst' is undefined!!!
      var p = $scope.tst;
  }

});

Or even try to use $q

The problem is the async nature of the functions, which your answer doesn't solve. — Ingo Bürk, Nov 22 '15 at 15:14

Pass a variable between two functions in a same controller

5 Answers5