AngularJS: How to initialize data through $http before executing other part of the code?

Question

I have below code

$scope.init = function (){        
        console.log($scope.languageFilePath);
        $http.get($scope.languageFilePath) //languageFilePath contain url
       .then(function(res){
            console.log('scueese');          
            $scope.translate = res.data;          
            console.log($scope.translate.SERVICE);
            // $scope.eqipment = $scope.translate['COLOR'];
            //console.log("Data String "+equip);
            //$scope.eqipment="ghsh"
        });    
    };
    $scope.init();

Now what is my issue this method calling properly but before initializing $scope.translate its executing other part of code.

What changes i have to do in the code so first its initialize $scope.translate then only it call some other methods of file .

Note:- $http.get() method calling when this method invoked after that other methods are executing and code inside then executing after those method called.

I have 3 questions . This init is for only a part of your app or for only this scope ? are you sure thre is no other function call before ? what is executed before ? — Dan M. CISSOKHO
– Dan M. CISSOKHO, Commented Aug 11, 2016 at 12:14
@DMCISSOKHO the above code executing but then condition calling after other function called . — Subodh Joshi
– Subodh Joshi, Commented Aug 11, 2016 at 12:15
you mean that a code that is under $scope.init() is invoked before $scope.translate, correct? — AranS
– AranS, Commented Aug 11, 2016 at 12:16
@AvinashRaj then how to initialize $scope.translate before calling other function because this data used by other function — Subodh Joshi
– Subodh Joshi, Commented Aug 11, 2016 at 12:20

illeb · Accepted Answer · 2016-08-11 13:25:27Z

1

If your problem is to execute the code after $scope.init() invocation, you could try to use the http.get promise, like this:

    $scope.init = function (){        
        console.log($scope.languageFilePath);
        return $http.get($scope.languageFilePath) //languageFilePath contain url
          .then(function(res){
            console.log('scueese');          
            $scope.translate = res.data;          
            console.log($scope.translate.SERVICE);
        });    
    };
    $scope.init().then(function(){
      //this code will be executed after the http get...
});

EDIT 1

after receiving some more code from OP, you should modify your .js file as shown here: http://pastebin.com/mFUWSU0N

this way, ALL the code below init() will be executed after the $http.get completion.

edited Aug 11, 2016 at 13:25

answered Aug 11, 2016 at 12:23

illeb

2,9471 gold badge23 silver badges35 bronze badges

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

10 Comments

Subodh Joshi Over a year ago

Do you mean i have to give two then ?

illeb Over a year ago

Give to who? This way, you are "chaining" the promise of the $http.get ($http uses promises to perform http requests). More simply, with the above code you will execute code after your http.get

Subodh Joshi Over a year ago

i am getting this error angular.js:12330 TypeError: Cannot read property 'then' of undefined

illeb Over a year ago

Please provide a plunker of your issue. as you can see from here, there's nothing wrong on promise chain: plnkr.co/edit/A9fq3IAHtC45L7KY2J0k?p=info so maybe the problem it's related to your code.

Subodh Joshi Over a year ago

I dont know how you run my code in plnkr because for me data is loading from rest url. Do you want to check the full file then i can add it there.

|

Dan M. CISSOKHO · Accepted Answer · 2016-08-11 12:25:01Z

0

may be you should out the wanted function in your init:

$scope.init = function (){        
        console.log($scope.languageFilePath);
        return $http.get($scope.languageFilePath) //languageFilePath contain url
          .then(function(res){
            console.log('scueese');          
            $scope.translate = res.data;          
            console.log($scope.translate.SERVICE);
            myFunc();
            myFunc2();
        });    
    };

answered Aug 11, 2016 at 12:25

Dan M. CISSOKHO

1,0851 gold badge14 silver badges28 bronze badges

3 Comments

Subodh Joshi Over a year ago

i cannt change code like this some of the function related to ui-grid which i don't have direct control

Dan M. CISSOKHO Over a year ago

so the ui-grid is initialized before your init

Subodh Joshi Over a year ago

Yes ui-grid initialized before data initialize in the variable.

Arno_Geismar · Accepted Answer · 2016-08-11 12:31:33Z

What you also could do is make it a dependency of your controller. Lets say for instance you are using the routeprovider to navigate to your page you could then do this:

myApp.config(['$routeProvider',function ($routeProvider) {  
    $routeProvider.when('../../goto/yourpage', {
        templateUrl: '/yourpage.html', 
        controller: 'myController',
        resolve: {
            initializeFunction: function($http) {
                // do some logic you want executed before anything else
                 return $http.get("blablabla").$promise;
              });    
            }
        }
    });   
}]);

then in your controller that is active on yourpage.html you can do:

myApp.controller('myController',function ($scope,initializeFunction) {
    $scope.possibleReturnFromTheFunction = initializeFunction; 
});

Collectives™ on Stack Overflow

AngularJS: How to initialize data through $http before executing other part of the code?

3 Answers 3

10 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related