Maksym Krugliachenko Maksym Krugliachenko - 6 months ago 18
JSON Question

Angularjs load after initial json

I need to get the information before it is available. I have a varibale

var myId
. I need this varible to pass
myapp.run()

I have 2 controllers for 2 different pages.

var myId; // I need this variable
afroEarthApp.controller('afroEarthMainCtrl',['$scope','$http','$location','$cookies', '$rootScope', function($scope, $http, $location, $cookies, $rootScope) {
$http.get('js/afro.json').success(function(data) {
$scope.myDataFirst = data;
$scope.singleNiche = $scope.myDataFirst.US;
$rootScope.header = $scope.singleNiche;
$rootScope.myDataVar = $scope.myDataFirst.US;
});
$scope.setCountry = function (choise) {
switch (choise){
case "US" : $scope.singleNiche = $scope.myDataFirst.US;
break;
case "UK" : $scope.singleNiche = $scope.myDataFirst.UK;
break;
case "SA" : $scope.singleNiche = $scope.myDataFirst.SA;
break;
case "CAN" : $scope.singleNiche = $scope.myDataFirst.CAN;
break;
case "AU" : $scope.singleNiche = $scope.myDataFirst.AU;
break;
}
$cookies.put("myCountry", choise);
$rootScope.header = $scope.singleNiche;
};
$rootScope.bodylayout = "home-page";
myId = $scope.singleNiche // here
}]);
afroEarthApp.controller('SingleCtrl',['$scope','$http', '$location', '$routeParams', 'Single', '$cookies', '$rootScope', function($scope, $http, $location, $routeParams, Single, $cookies, $rootScope) {
$scope.niche = $routeParams.niche;
$rootScope.bodylayout = "single-page";
var url = 'sites/'+$routeParams.niche+'.json';
Single.get({niche: $routeParams.niche}, function (data) {
$scope.singleFirst = data;
$scope.singleNiche = $scope.singleFirst.US;
var getCountry = String($cookies.get("myCountry"));
$scope.setCountry = function (choice) {
switch (choice) {
case "US" :
$scope.singleNiche = $scope.singleFirst.US;
break;
case "UK" :
$scope.singleNiche = $scope.singleFirst.UK;
break;
case "SA" :
$scope.singleNiche = $scope.singleFirst.SA;
break;
case "CAN" :
$scope.singleNiche = $scope.singleFirst.CAN;
break;
case "AU" :
$scope.singleNiche = $scope.singleFirst.AU;
break;
}
$rootScope.header = $scope.singleNiche;
}
$scope.setCountry(getCountry);

})
$rootScope.header = $scope.singleNiche;
myId = $scope.singleNiche; // here
}]);
afroEarthApp.run(function ($rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
...some code...
console.log(myId) // undefined
console.log(myId.id) // undefined
...some code...
});
});


Can you help me.

Answer

I unbderstood what the problem is , $scope.myDataFirst = data; is set inside the $http.get() & since this is a asynchronous call, it would not set data immediately.

but Javascript engine doesnt wait for the asynchronous call to complete, hence $scope.myDataFirst.US; throws errors which in turn sets undefined value to myId = $scope.singleNiche // here.


Solution:

  • Move all code inside success callback like below.
  • You haven't handled error handling flow in your code, which is essentialy when working with ajax calls

JS CODE:

$http.get('js/afro.json').then(
   successHandler,
   errorHandler
);

function successHandler(data){
   $scope.myDataFirst = data;
   $scope.singleNiche = $scope.myDataFirst.US;
   $rootScope.header = $scope.singleNiche;
   $rootScope.myDataVar = $scope.myDataFirst.US;

   $scope.setCountry = function (choise) {
      switch (choise){
        case "US" : $scope.singleNiche = $scope.myDataFirst.US;
            break;
        case "UK" : $scope.singleNiche = $scope.myDataFirst.UK;
            break;
        case "SA" : $scope.singleNiche = $scope.myDataFirst.SA;
            break;
        case "CAN" : $scope.singleNiche = $scope.myDataFirst.CAN;
            break;
        case "AU" : $scope.singleNiche = $scope.myDataFirst.AU;
            break;
     }
     $cookies.put("myCountry", choise);
     $rootScope.header = $scope.singleNiche;
  };
    $rootScope.bodylayout = "home-page";
    myId = $scope.singleNiche;
}

function errorHandler(error){
   //show error message when async call fails.
}
Comments