ng-if being called before data is ready with AngularJS

Question

With all the examples of services, factories, using $scope, using Controller as, I'm getting a bit confused. I have a simple ng-if expression that's returning undefined because the data to evaluate isn't ready yet:

<div ng-if="ctrl.AlreadyBoughtShoe('ShoeId')"> ... </div>

  ...

<script>
  (function() {

    var MyApp = angular.module("MyApp", []);

    MyApp.controller("MyAppController", function($http, $timeout, ShoeService) {
      var x = this

      loadRemoteData();

      function loadRemoteData() {
        ShoeService.GetShoes().then(function(Shoes){
          applyRemoteData(Shoes); 
        });
      }

      function applyRemoteData(Shoes) {
        x.Shoes = Shoes;
      }

      // FAILS HERE - Get undefined on the array
      x.AlreadyBoughtShoe = function(shoeId) {
        for (var i = 0; i < x.Shoes.length; i++) {
            // Do stuff 
        }               
      } 
    });

    MyApp.service("ShoesService", function($http, $q){

      return({
        GetShoes: GetShoes        
      });

      function GetShoes() {

        var request = $http({
            method: "GET",
            url: /MyUrl",
            cache: false,
            headers: $myHeaders            
        });

        return( request.then(handleSuccess, handleError));
      }

      function handleError( response ) {

        if (!angular.isObject(response.data) || !response.data.message) {
          return( $q.reject( "An unknown error occurred." ) );
        }

        return( $q.reject(response.data.message) );

      }

      function handleSuccess( response ) {
        return( response.data );            
      }

    });
  })();

</script>

Also, if it's relevant, in this particular case it has nothing to do with shoes... and the data is a person object, and there's no ng-repeat going on, so the ID for the "shoe" is manually typed in. I jumbled up my actual code to simplify this so I can understand the best way to deal with it, but that ng-if needs to evaluate after the data is ready to be evaluated.

I'm not sure how to best used promises or whatever else I need in this style of format, which I found an example of somewhere on the web a while back.

It's obviously a promise issue but I'm not sure the correct code. — djechlin
– djechlin, Commented Jul 14, 2015 at 21:52
possible duplicate of angularjs ng-show with promise expression — djechlin
– djechlin, Commented Jul 14, 2015 at 21:53

scniro · Accepted Answer · 2015-07-14 21:58:57Z

1

This is happening because of the asynchronous nature of your service call in ShoeService. Your error is occurring due to code being called before x.Shoes = Shoes is resolved, essentially iterating over undefined. Try moving your logic into the then callback of your service. For example...

function loadRemoteData() {
   ShoeService.GetShoes().then(function(Shoes) {
       applyRemoteData(Shoes); 

       x.AlreadyBoughtShoe = function(shoeId) {
           for (var i = 0; i < x.Shoes.length; i++) {
               // Do stuff 
           }               
       } 
   });
}

You can probably move this to the end of applyRemoteData also if you wish. Either way you will need to execute this logic after you resolve x.Shoes

edited Jul 14, 2015 at 21:58

answered Jul 14, 2015 at 21:53

scniro

17k8 gold badges67 silver badges108 bronze badges

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

2 Comments

user1447679 Over a year ago

Thank you! I saw the possible duplicate. The ng-init is now discouraged, and with my particular setup it was hard to follow and translate into my situation. Not sure who voted to close, but wanted to say thanks. You saved me a headache regardless!

scniro Over a year ago

You are very welcome and I appreciate the feedback. Happy coding :)

mz3 · Accepted Answer · 2015-07-14 21:54:44Z

0

You are right - when this code runs, x.Shoes is undefined. Change:

x.AlreadyBoughtShoe = function(shoeId) {
  for (var i = 0; i < x.Shoes.length; i++) {
      // Do stuff 
  }               
}

to:

x.AlreadyBoughtShoe = function(shoeId) {
  for (var i = 0; i < (x.Shoes || []).length; i++) {
      // Do stuff
  }
}

answered Jul 14, 2015 at 21:54

mz3

1,35412 silver badges28 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:21:45Z

0

You have multiple options.

Evaluate the ng-if to false by default until you receive the data. You keep your AlreadyBoughtShoe method but you first check if you have data. If you don't have data yet just return false. You won't have an error anymore and when your promise is resolved your HTML should reflect that.
You can delay controller initialization until your promise is resolved.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jul 14, 2015 at 21:57

Stefan Ch

3292 silver badges7 bronze badges

Comments

changtung · Accepted Answer · 2015-07-14 22:19:06Z

0

Maybe setting semaphore or something simillar can help. Promise evaluates after some period of time, and setting variable to true after succesfull call may help. Then add that variable to the ng-if condition, which would evaluate function only when variable is true, so the promise returned.

Set variable to and condition, which would evaluate when both are true.

<div ng-if="ctrl.loaded && ctrl.AlreadyBoughtShoe('ShoeId')"> ... </div>

Then set variable to true on success ( by default is set to false because of javascript ).

  function loadRemoteData() {
        ShoeService.GetShoes().then(function(Shoes){
          x.loaded = true;
          applyRemoteData(Shoes); 
        });
      }

This may help.

answered Jul 14, 2015 at 22:19

changtung

1,6242 gold badges15 silver badges19 bronze badges

Collectives™ on Stack Overflow

ng-if being called before data is ready with AngularJS

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related