What are some ways to delay the loading of the DOM until the object is completely loaded in the $scope?

Question

What are some ways to delay the loading of the DOM until the object is completely loaded in the $scope?

I've encountered an issue with loading a JSON file that is nearly 19,000 lines long. When minified to a single line, it's about 240k. I'm currently loading this JSON into my app via the index.html file as a global variable:

<script type="text/javascript" src="js/cdjson.js"></script>

var _countries = {
   "country": {
      "USA": {
         "currency": {
            "currencyCode":["USD"],
                "currencyName":["United States Dollar"],
                "currencySymbol":["&#36;"]
         },
         "info": { 
               ...
               ...
         },
         "phone" : {
               ...
         },
         "postal" : {
               ...
         }
      },
      "CAN" : {
         ...
      }
   }
}

Within the controller, I am assigning it to a $scope variable like so:

$scope.countries = _countries.country ;

. However, the HTML DOM for that controller tries to access the $scope variable before the object is fully loaded, resulting in JS object errors such as

Cannot read property 'country' of undefined

.

Is there a way to prevent the page from rendering until the $scope object is completely loaded? The $scope country object is used in a

<select ng-repeat="countries as country">

javascript angularjs angularjs-scope javascript-objects

Answer 1

Answer №1

It is recommended to load your js files at the bottom of your HTML to avoid this issue. However, if that is not possible, you can add the following code in your controller:

$scope.countries = []
angular.element(document).ready(function () {
    $scope.countries = _countries.country;
});

Also, make sure to include the following code in your HTML:

<select ng-if="countries.length" ng-repeat="countries as country">

Answer 2

It is recommended to load your js files at the bottom of your HTML to avoid this issue. However, if that is not possible, you can add the following code in your controller:

$scope.countries = []
angular.element(document).ready(function () {
    $scope.countries = _countries.country;
});

Also, make sure to include the following code in your HTML:

<select ng-if="countries.length" ng-repeat="countries as country">

Answer 3

Answer №2

Implement a flag to signal the controller when all data has been successfully loaded. Consider using something similar to:

<select ng-if="countries.length" ng-repeat="countries as country">

Answer 4

Implement a flag to signal the controller when all data has been successfully loaded. Consider using something similar to:

<select ng-if="countries.length" ng-repeat="countries as country">

What are some ways to delay the loading of the DOM until the object is completely loaded in the $scope?

Answer №1

Answer №2

Similar questions

Tips for showing data from Ajax responses on an HTML page

Having difficulty deleting items with Three.JS

Utilize Bootstrap4 to position content above the navigation icon

Enhancing visual appearance with customized look control through the use of setAttribute

What is the best way to set up multiple unique uglify tasks in grunt?

Auto-suggest dropdown menu with pre-populated options

Is there a way to redirect focus to an object with a lower z-index when working on overlaying a sequence of transparent divs on a map?

The issue with displaying Infogram embed code in a React application

What is the best way to apply distinct styles to two different views in Angular?

What are the steps to effectively set up a provider service in Angular.js?

Reorder elements using CSS when they do not share the same immediate parent container

Building an array using class value types in TypeScript

make the text in em font size larger

What is the best way to resize an image within a canvas?

What could be the reason for the peculiar data being returned by Microsoft Graph list subscriptions?

Making changes to a specific row in a datatable within a Flask project

Twice the charm, as the function `$("#id").ajaxStart(...)` is triggered twice within an AJAX request

What is the reason behind console.log() displaying an array, while typeof returning 'object'?

Attempting to showcase information from a JSON file using the ng-repeat directive

TypeScript Compile Error: The property is not available in the 'IStateParamsService' type