"loading" or "wait" message before my JSON data loads in AngularJS

Question

I have seen some solutions on how to put a wait msg before the JSON data gets loaded from a URL or a separate file using $http get() request but I haven't seen with JSON with a smarty format in the HTML file itself. In this case {$data} is my JSON array that looks like this {"title":"A2378","sub_name":"A2333", .....}. Any easy way on how to put a wait msg before my json gets loaded on my html file?

<script type="text/javascript">
var app= angular.module('mysearch', []);
app.controller('mysearchController', ['$scope', function($scope){
        $scope.products = {$data}; 
]);
</script>

<div ng-app="mysearch">
   <div ng-controller="mysearchController">
      <div ng-repeat="item in products">
           {{item.sub_name}}
      </div>
      <p> {{item.title}}</p>
   </div>
</div>

Thanks in advance!

Duncan · Accepted Answer · 2016-06-02 15:03:00Z

1

Just set a flag in your scope to indicate whether you have loaded the data:

<div ng-app="mysearch">
   <div ng-controller="mysearchController">
      <div ng-if="!loaded">Loading...</div>
      <div ng-if="loaded">
        <div ng-repeat="item in products">
           {{item.sub_name}}
           <p> {{item.title}}</p>
        </div>
      </div>
   </div>
</div>

Then your controller can set that flag true when you have finished loading the data. e.g.:

app.controller('mysearchController', ['$scope', function($scope){
    $scope.loaded = false;
    $http.get('...').then(function(response) {
         $scope.products = response.data;
         $scope.loaded = true;
    });
]);

Obviously if you are loading the data by some other mechanism your code won't look exactly like this, but the idea is the same, just toggle a flag when the data is completely loaded.

answered Jun 2, 2016 at 15:03

Duncan

96.4k15 gold badges129 silver badges160 bronze badges

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

2 Comments

missgg Over a year ago

Thanks for the comment. I like the idea and have seen this but I have my JSON data as in {$data} which is an array so is it possible to use $http.get( {$data} ).then(function(response).....? I thought I can only use either an url or 'content.json' as a file inside $http.get('....').

missgg Over a year ago

I just put my JSON in a seperate file and used the URL to get the data. This solution works. Thanks for your help!

Collectives™ on Stack Overflow

"loading" or "wait" message before my JSON data loads in AngularJS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related