Why my If statement is not working 100 % in JS in AngularJS

Question

enter image description here I have a $scope.reasonList which I iterate with ng-repeat. But if I go back and forward exactly same page with same data sometimes if operatotor is not working and the $scope.reasonList is empty. Exactly same data and same page? Those are strings what I have been comparing. What is happening here and WHY?

var reasons = new Array();
var roots = new Array();
var repairs = new Array();
var defectDescsArray = new Array();
defectDescsArray= defectDescSvc.query();
$scope.rma = rmaService.get({id: $routeParams.rmaId});

var rmaHasDefects = rmaDefectSvc.findByRmaId({rmaid: $routeParams.rmaId});
    rmaHasDefects.$promise.then(function (result) {
        alert('result.length:' +result.length)

        for (var i = 0; i < result.length; i++) {

            for (var j = 0; j < defectDescsArray.length; j++) {

            if (result[i].rmaHasDefectdescPK.defectdescDefectdescId === defectDescsArray[j].defectdescId) {

                 $scope.showReasonList = true;
                 reasons.push(defectDescsArray[j]);

            }
         }

     }

       $scope.reasonList = reasons;
       //$scope.$apply();
       alert('$scope.reasonList.length' +$scope.reasonList.length);

                    });

VIEW

<div class="col-sm-10">
    <table class="table table-striped table-condensed table-hover">
        <tbody>
            <tr ng-repeat="defect in reasonList">

                <td>{{ defect.returnreasonReturnreasonId.returnText}}</td>
                <td>{{ defect.text}}</td>
            </TR>
        </TBODY>
    </table>
</div>

Angular Service for getting defects

angular.module('defectDescService', ['ngResource'])
    .factory('defectDescSvc', ['$resource',
        function ($resource) {
            console.log('------defectDescService-----');
            return $resource(
                    '/RMAServerMav/webresources/com.rako.entity.defectdesc/:id',
                    {},
                    {
                         delete: { method: 'DELETE', params: {id: '@defectdescId'}}, 
                         update: { method: 'PUT', params: {id: '@defectdescId'} },
                         findByDefectdescId:{
                            url: '/RMAServerMav/webresources/com.rako.entity.defectdesc/defect/:defid',        
                            method: 'GET', 

                            params: {defid: '@defid'},
                            isArray:true}
                    });
        }]);

@cyan I edited my question. And yes I can. It is a static list where is more that 100 elements. — Sami, Jul 16 '15 at 12:55
How do you use routes? is the page where you go back with the same controller? — changtung, Jul 16 '15 at 12:59
@cyan no. Those two Pages has controllers of their own. Listcontroller and repair controller. — Sami, Jul 16 '15 at 13:07
@ cyan - Yes. I edited the question. Although I have the same list in scope as well, but I though first that this is some kind of scope issue. — Sami, Jul 16 '15 at 14:02

score 1 · Accepted Answer · edited May 23 '17 at 12:21

defectDescsArray is applied with a promise. rmaHasDefects promise function is called and it is also a promise. rmaHasDefects promise then guarantee, that the body code is executed after succesful call. But problem is, that when executed code is run, you don't have guarantee that defectDescsArray is an array with values, because promise call isn't synchronized. That's why, sometime one promise finish first, that is normal case and sometime another promise finish first and then reasonList is empty. To prove this, log defectDescsArray in a promise, and you'll see that sometime it's empty and sometimes not.

for (var j = 0; j < defectDescsArray.length; j++) {
    console.log('defectDescsArray length:',defectDescsArray.length);
    if (result[i].rmaHasDefectdescPK.defectdescDefectdescId === defectDescsArray[j].defectdescId) {

The solution is to synchronise two promises, by using promise on resource.

  defectDescsArray= defectDescSvc.query();
    //using a promise and second call is inside a promise to determine not empty //array. 
    defectDescsArray.$promise.then(function (result) {
        defectDescsArray = result;
    $scope.rma = rmaService.get({id: $routeParams.rmaId});

    var rmaHasDefects = rmaDefectSvc.findByRmaId({rmaid: $routeParams.rmaId});
    rmaHasDefects.$promise.then(function (result) {
        alert('result.length:' +result.length)

        for (var i = 0; i < result.length; i++) {

            for (var j = 0; j < defectDescsArray.length; j++) {

            if (result[i].rmaHasDefectdescPK.defectdescDefectdescId === defectDescsArray[j].defectdescId) {

                 $scope.showReasonList = true;
                 reasons.push(defectDescsArray[j]);

            }
         }

     }

       $scope.reasonList = reasons;
       //$scope.$apply();
       alert('$scope.reasonList.length' +$scope.reasonList.length);

                    });
});

I am basing on this post.

it seems that query() returns array from promise. Could you show this method? If you return Promise, you can use then on this promise and after success calling another promise with rmaHasDefects should synchronize it. — changtung, Jul 16 '15 at 15:39
It is basic $resource query. Could you show me with code what you mean with returnin promises? — Sami, Jul 17 '15 at 07:23
Thanks! I got it working before. I just split my code to functions and used promises to be sure that everything is fetched from db. Thanks a lot for your help, it was your comment what helped me a lot! JS is sometimes so horrible :) — Sami, Jul 17 '15 at 15:49

Why my If statement is not working 100 % in JS in AngularJS

1 Answers1