CODEWITHSUNDEEP
javascripthtmlangularjs
StoneMan
StoneMan

Reputation: 423

When I keep refreshing my angularJS page, the content sometimes shows up, sometimes doesn't

I have a page running angularJS. Sometimes, when I open the document, the data that needs to appear only sometimes shows up. When I keep trying to refresh the page, it's pretty much random: sometimes the content appears, sometimes it doesn't.

The section of the code that runs this looks like this:

                <div class="row">
                    <div class="col-md-12" ng-repeat="(observer,hosts2) in bugDuration">
                        {{observer}}
                        <div class="row">
                            <div class="col-md-3" ng-repeat="(host, bugs2) in hosts2"> {{host}} 
                                <div ng-repeat="(bug, duration) in bugs2">
                                    {{bug}} for {{duration}} seconds.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

As you can see, it is using ng-repeat, and my best guess is that when this code is running, the ng-repeat objects, such as bugDuration are empty, so none of it runs.

My script that initializes all of these variables is located after, in my document. Is there something I should do in the controller or whatever so the variables can be refreshed and the content can be shown everytime?

Edit

Here is the code where bugDuration is initialized:

 bugDuration = {};
                    bugTracker = {};

                    $.getJSON('../java_output/bugs.json', function (data) {
                        for ( var observer in data ) {
                            bugDuration[observer] = {};
                            for (var host in data[observer]) {
                                bugDuration[observer][host] = {};
                                for (var bug in data[observer][host]) {
                                    bugDuration[observer][host][bug] = data[observer][host][bug].duration;    
                                }
                            }
                        }

                        console.log (bugDuration);
                    });


                    $.getJSON('../java_output/bug_summary.json', function (data) {
                        var numObservers = data.numObservers;
                        delete data['numObservers'];
                        JSONbugsList = data;
                        var bugTracker = {};
                        for (var observer = 1; observer <= numObservers; observer++) {
                            observers.push(observer);
                            observerKeys = Object.keys(data);
                            // observerKeys.splice(observerKeys.indexOf('numObservers'));
                            for (var host in data["observer" + observer]) {
                                if (hosts.indexOf(host) == -1) {
                                    hosts.push(host);
                                }
                                hostKeys = Object.keys(data["observer" + observer]);
                                for (var bug in data["observer" + observer][host]) {
                                    if (bugs.indexOf(bug) == -1) {
                                        bugs.push(bug);  
                                    }
                                    for (var i in  data["observer" + observer][host][bug]) { 
                                        bugTracker[bug] = true;
                                        var dateVar = data["observer" + observer][host][bug][i];
                                        var intoList = {"observer":observer, "host":host, "bug":bug, "start":(new Date(1000*dateVar.start)), "end":(dateVar.end==null?' the end.':(new Date(1000*dateVar.end)))} 
                                        }
                                }
                            }
                        }



                       // Removed unimportant stuff here//



                        $scope.$apply();
                        $scope.hostsS = hosts;
                        $scope.bugsS = bugs;
                        $scope.observersS = observers;
                        $scope.JSONbugsList = JSONbugsList;
                        $scope.hostKeys = hostKeys;
                        $scope.observerKeys = observerKeys; 
                        $scope.start = 'start';
                        $scope.end = 'end';
                        $scope.bugDuration = bugDuration;
                        $scope.$apply();

Upvotes: 0

Views: 1267

Answers (1)

tommybananas
tommybananas

Reputation: 5736

The biggest problem among others is that $scope.$apply() needs to happen after the data gets set on the $scope. Since $.getJSON is asynchronous, by the time the callback gets triggered, the $scope.$apply() lines at the bottom will have already been fired.

$.getJSON('../java_output/bug_summary.json', function (data) {
  /*do stuff outside of angular context when the ASYNC callback fires*/
  $scope.stuff = data;
  /*then call $scope.$apply()*/
  $scope.$apply();
});

Upvotes: 1

Related Questions