Angularjs load after initial json

Question

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.

I tried. It didn't help me. The problem with reception data from JSON. When I try to get data it isn't available yet. All my pages work good, they recieve data from this JSON. I have only one problem with transfer this variable(with data from JSON) from my app.controller to app.run. — Maksym Krugliachenko
– Maksym Krugliachenko, Commented Apr 4, 2016 at 9:34
It's not clear to me what you wish to do with that variable and what exactly is the issue? — Alari Truuts
– Alari Truuts, Commented Apr 4, 2016 at 10:05
I have 7 JSONs. In the JSON I have array with countries, in the country I have Id for backend(platform). I need get this Id and put to the futher js code for backend(platform) in the app.run. — Maksym Krugliachenko
– Maksym Krugliachenko, Commented Apr 4, 2016 at 10:18
based on what I see everything in that code piece should work.. maybe try assigning the $scope.singleFirst.XX to myId in the switch case and assign myId to singleNiche afterwards. Does everything inside your controller and the function work properly? — Alari Truuts
– Alari Truuts, Commented Apr 4, 2016 at 11:18

dreamweiver · Accepted Answer · 2016-04-04 12:28:58Z

3

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.
}

edited Apr 4, 2016 at 12:28

answered Apr 4, 2016 at 12:20

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

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

16 Comments

Maksym Krugliachenko Over a year ago

It doesn't help me. The code is work , but I still can't get myId . I see only in the function successHandler(data) but outside is undefinde. i.imgur.com/9soB8pP.jpg?1

dreamweiver Over a year ago

Yes thats exactly what iam saying, when Javascript engine runs your script, it triggers the $http.get() and continues with following statements, it doesnt wait for successHandler() to execute, due to which when you console.log(myId); outside successHandler() it wont work at that instance. check this jsfiddle to know more how ajax calls work, jsfiddle.net/dreamweiver/WQXXT/1467

Maksym Krugliachenko Over a year ago

Ok. I got you. But what should I to do? I need this variable. Maybe do you know another way? Set $http.get() outside controller or use REST or something else?

Maksym Krugliachenko Over a year ago

I need put this variabl to app.run or index.html inside tag script

dreamweiver Over a year ago

well if you need to use the value myId for text field then set it to $scope and access the same via ng-model inside input tag(two-way binding).

|

Collectives™ on Stack Overflow

Angularjs load after initial json

1 Answer 1

Solution:

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Solution:

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related