Update view only when the json is received completely from ajax call in angularJS

Question

I'm new to angularJS and still learning. I'm trying to create a navbar in the header which gets the data from ajax call.

However, it shows {{obj.pageData}} until data is completely received. It is very annoying to see this everytime I refresh the page!

How could I avoid it to show {{obj.pageData}} in the view and rather update it directly when the entire data is received from JSON?

Here's the sample code:

View:

<nav ng-app="topNavApp" ng-controller="navCtrl" class="nav">
  <div class="nav-center">
    <!--<li ng-repeat="obj in pageData.allChildList" ng-model="parentNav" ng-mouseover="parentNav=true" ng-mouseleave="parentNav=false"> -->
    <div ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv()" ng-mouseleave="hideDiv()" > 
      <div>
        <a ng-href="{{obj.pagePath}}" class="main-link multiple menu-link">{{obj.pageTitle}}</a>
        <!--<span class="main-link mobile" aria-labelledby="{{obj.pageTitle}}" aria-expanded="false">{{obj.pageTitle}}</span>-->

        <!--<span ng-repeat="child in obj.secondLevelVoList" class="childNav" ng-show="parentNav">--> 
        <div class="farm-links" ng-show="hovering">
          <!--<a class="prev-link" aria-labelledby="{{obj.pagetitle}}">{{obj.pageTitle}}</a>-->
          <div ng-repeat="child in obj.secondLevelChildList" class="groups-links">
            <a ng-href="{{child.pagePath}}" class="group-title">{{child.pageTitle}}</a>
            <!--<span class="group-title mobile" aria-expanded="false">{{child.pageTitle}}</span>-->
            <ul ng-repeat="subchild in child.thirdLevelChildList" class="group-links">
              <li class="second-link">
                <a ng-href="{{subchild.pagePath}}">{{subchild.pageTitle}}</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

Controller:

angular.module('topNavApp', []).controller('navCtrl', ['$scope', '$timeout', '$http', function($scope, $timeout, $http){
    $http.get("/content/projdata/myJSONData.json").then(function(response){
        $scope.pageData = response.data;
    })['catch'](function(){
        console.log('failed');
    });
}]);

Please let me know in case of additional details required.

In your routing you can use "resolve". so when routing changes it will make http call, resolve promise then load your views. — Ravi Kumar, Aug 22 '17 at 17:10
I like @RaviKumar 's answer if you are using routing, but it doesn't appear that you are. a How about ng-if="pageData" on your div? — jbrown, Aug 22 '17 at 17:15

score 1 · Accepted Answer · answered Aug 22 '17 at 17:55

1

You can use the angular ng-Clock directive to prevent the brief display of the angular html template.

<div class="nav-center" ng-cloak>

</div>

Another option is to use ng-bind instead of {{}}

answered Aug 22 '17 at 17:55

Shyju

214,206
104
411
497

score 0 · Answer 2 · answered Aug 22 '17 at 17:58

You just need to set a condition for controlling when the data should be shown. For this you can use whether ng-show or ng-if.

Like this:

<div ng-if="pageData" ng-cloack ng-repeat="obj in pageData.allChildList" class="hiding-div" ng-mouseover="showDiv()" ng-mouseleave="hideDiv()" >
    <!--- ... -->
</div>

In this example AngularJS evaluates the expression ng-if="pageData" and it will only show the div when pageData is truthy .

In addition you can use ng-cloack in order to avoid any possible flickering of the page.

score 0 · Answer 3 · answered Aug 22 '17 at 18:40

0

You can use Angular Resolve which until data is received and then only it renders the data.

Check this stackoverflow

answered Aug 22 '17 at 18:40

Varun Sukheja

6,170
5
51
93

Update view only when the json is received completely from ajax call in angularJS

3 Answers3