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
– Sami, Commented Jul 16, 2015 at 12:55
How do you use routes? is the page where you go back with the same controller? — changtung
– changtung, Commented Jul 16, 2015 at 12:59
@cyan no. Those two Pages has controllers of their own. Listcontroller and repair controller. — Sami
– Sami, Commented Jul 16, 2015 at 13:07

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

1

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.

edited May 23, 2017 at 12:21

CommunityBot

11 silver badge

answered Jul 16, 2015 at 14:38

changtung

1,6242 gold badges15 silver badges19 bronze badges

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

4 Comments

Sami Over a year ago

how to avoid that case?

changtung Over a year ago

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.

Sami Over a year ago

It is basic $resource query. Could you show me with code what you mean with returnin promises?

Sami Over a year ago

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 :)

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related