Infinite loop with javascript (Angular NgFor and http request)

Question

Problem is meanwhile I'm trying to check if one image exists on the resources server, Angular NgFor is performing its work.

I can guess, img.src performs the request, then my returns in callbacks are not returned as expected, in fact, defaultPrincipalUrl method is not returning nothing as expected, and for that reason Angular is performing the same requests again and again.

But, I don't know the way to solve it in Javascript.

The NgFor in the html looks like this.

<div class="formItem">
    <div *ng-for="#principal of localService.defaultPrincipals">
        <img src="{{defaultPrincipalUrl(principal)}}" />
    </div>
</div>

Where localService.defaultPrincipals is one array which contains image names.

In the Angular2 @Component class, I've the next implementation.

private imageExists(imageSrc, callback) {

    var img = new Image();

    img.onload = function () { callback(imageSrc, true); };
    img.onerror = function () { callback(imageSrc, false); };

    img.src = imageSrc;
}

defaultPrincipalUrl(principal) {

    var im = IMAGE_DOMAIN + '/principal/' + principal;

    console.log(im);

    this.imageExists(im, function (imageSrc, exists) {

        console.log('RESULT: url=' + imageSrc + ', exists=' + exists);

        if (exists) {

            return imageSrc;
        } else {

             return '#';
        }
    });
}

defaultPrincipalUrl doesn't return a value .. the value returned by the call callback won't be propagated ( it's an async callback also ). — Mourad Zouabi
– Mourad Zouabi, Commented Dec 22, 2015 at 20:08

Mourad Zouabi · Accepted Answer · 2015-12-22 20:14:42Z

2

Use the async pipe.

<div class="formItem">
    <div *ng-for="#principal of localService.defaultPrincipals">
        <img src="{{defaultPrincipalUrl(principal) | async}}" />
    </div>
</div>

The result of defaultPrincipalUrl must be a promise because the callback is async :

private imageExists(imageSrc, callback) {

    var img = new Image();

    img.onload = function () { callback(imageSrc, true); };
    img.onerror = function () { callback(imageSrc, false); };

    img.src = imageSrc;
}

defaultPrincipalUrl(principal) {

    var im = IMAGE_DOMAIN + '/principal/' + principal;

    console.log(im);

    let self_ = this;

    return new Promise(function(resolve, reject) {

    self_.imageExists(im, function (imageSrc, exists) {

        console.log('RESULT: url=' + imageSrc + ', exists=' + exists);

        if (exists) {
            resolve(imageSrc);
        } else {
            resolve('#');
        }
    });


    });

}

answered Dec 22, 2015 at 20:14

Mourad Zouabi

2,2072 gold badges16 silver badges20 bronze badges

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

2 Comments

Dani Over a year ago

Ty for your answer Mourad Zouabi, I was looking for something like your contribution, works with Promises or something else ;). But, surprisingly, the behaviour is the same, infinite loop performs. If you want I can update #1, but code looks like to posted by you.

Dani Over a year ago

For more information, I was working with "2.0.0-alpha.46", thinking could be possible that features were working wrong on that version, I've upgrade to "2.0.0-beta.0", but has not been any improvement.

Collectives™ on Stack Overflow

Infinite loop with javascript (Angular NgFor and http request)

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