AngularJS access outside $http

Question

May i know, why I can't access $scope.auditorium outside the $http method but I can access the other $http (e.g $scope.exhibition) in another $http ($scope.auditorium). Concatenating the 2 scope at the end through $scope.combine

Code:

      myApp.controller('displayCatController', ['$scope','$http', function($scope, $http){

              //Display auditoriums information
              $http({
                  method: 'GET',
                  url:'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=auditoriums&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                  }).then(function successCallback(response) {
                    $scope.auditoriums = response.data.SrchResults;
                  }, function errorCallback(response) {
                    console.log(response);
                  });



              //Display exhibitions information
              $http({
                        method: 'GET',
                  url: 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=exhibitioncentres&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                        }).then(function successCallback(response) {
                            $scope.exhibitions = response.data.SrchResults;
                    $scope.exhibitions.splice(0,1);
                        }, function errorCallback(response) {
                            console.log(response);
                        });

                    $scope.combine = $scope.exhibitions.concat($scope.auditoriums, $scope.hotels);
                    console.log($scope.combine);
      }]);

I am not able to access the $scope.combine, it displays nothing. But on the other hand if i were to place the $scope inside the $http, example like this :

      myApp.controller('displayCatController', ['$scope','$http', function($scope, $http){

              //Display auditoriums information
              $http({
                  method: 'GET',
                  url:'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=auditoriums&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                  }).then(function successCallback(response) {
                    $scope.auditoriums = response.data.SrchResults;
                  }, function errorCallback(response) {
                    console.log(response);
                  });


              //Display exhibitions information
              $http({
                        method: 'GET',
                  url: 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=exhibitioncentres&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                        }).then(function successCallback(response) {
                            $scope.exhibitions = response.data.SrchResults;
                    $scope.exhibitions.splice(0,1);
                $scope.combine = $scope.exhibitions.concat($scope.auditoriums, $scope.hotels);
                console.log($scope.combine);
                        }, function errorCallback(response) {
                            console.log(response);
                        });



      }]);

Please forgive me if the question is dumb, I am still rather new to AngularJS. Thanks for the help!

Marcus Höglund · Accepted Answer · 2018-10-05 05:50:18Z

The $http service will run async while your declaration of $scope.combine will run sync and be set before the async operations are finished. Thats why the values are empty.

One option to solve this is to wait for all the async operations to finished.

Here's an example

myApp.controller('displayCatController', ['$scope','$http','$q', function($scope, $http, $q){

              //Display auditoriums information
              var promise1 = $http({
                  method: 'GET',
                  url:'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=auditoriums&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                  }).then(function successCallback(response) {
                    $scope.auditoriums = response.data.SrchResults;
                  }, function errorCallback(response) {
                    console.log(response);
                  });


              //Display exhibitions information
              var promise2 =$http({
                        method: 'GET',
                  url: 'https://developers.onemap.sg/publicapi/themeapi/retrieveTheme?queryName=exhibitioncentres&token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjMsInVzZXJfaWQiOjMsImVtYWlsIjoicHVibGljQXBpUm9sZUBzbGEuZ292LnNnIiwiZm9yZXZlciI6ZmFsc2UsImlzcyI6Imh0dHA6XC9cL29tMi5kZmUub25lbWFwLnNnXC9hcGlcL3YyXC91c2VyXC9zZXNzaW9uIiwiaWF0IjoxNTM4Mzc5ODU3LCJleHAiOjE1Mzg4MTE4NTcsIm5iZiI6MTUzODM3OTg1NywianRpIjoiMmUxZDI2NzM0YjkxYzg2N2Y4NDdkZjI1ZTVhMzQyMjgifQ.HUmGwWO7E1MJpFADcuQyVA0h6bR2Vkkp0BQrTfrEj0k'
                        }).then(function successCallback(response) {
                            $scope.exhibitions = response.data.SrchResults;
                            $scope.exhibitions.splice(0,1);
                        }, function errorCallback(response) {
                            console.log(response);
                        });


            $q.all([promise1, promise2]).then(function(){
                $scope.combine = $scope.exhibitions.concat($scope.auditoriums, $scope.hotels);
                console.log($scope.combine);
            });

}]);

Collectives™ on Stack Overflow

AngularJS access outside $http

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related