0

I'm trying to pass a value after checking that the URL coming from the connectedCallback is valid. When I try to pass the value to the this.frontImage property I'm facing an issue, nothing really happens. Can get and alert to print the value either is the value passed to the property ending with an empty URL. There is a way to find out what is going on here? The alerts that you can see on this fragment of the code are printing out correctly but all goes dark if I try to reference to a property using 'this' keyword. Any idea how to solve this?

@track frontImage;
    
apexGetAssetData({
            recordId: this.recordId
          })
              .then(result => {
                if (result['error']) {
                  fireToast(this, 'error', 'Error', result['message']);
                } else {
                  alert('starts');
                  this.assetName = result['assetName'];
                  this.checkImageExists(result['frontImage'], function (existsImage) {
                    if (existsImage === true) {
                      // image exist
                      alert('image exist');
                      alert('result front image: ' + result['frontImage']);
                      this.frontImage = result['frontImage']; <-- This is not working.
                      alert('this.frontImage: ' + frontImage);
                    } else {
                      // image not exist
                      alert('image does not exist');
                    }
                  });
                  alert('let frontImage: ' + frontImage); <--- this give undefined
              })
              .catch(error => {
                console.log('Something went wrong' + 'Error: ' + error.message);
              })
              .finally(() => {
                this.showSpinner = false;
              })
        } else {
          fireToast(this, 'error', 'Error',
              'Error when processing images.Please contact your administrator');
        }
      }
    
      checkImageExists(imageUrl, callBack) {
        let imageData = new Image();
        imageData.onload = function () {
          callBack(true);
        };
        imageData.onerror = function () {
          callBack(false);
        };
        imageData.src = imageUrl;
      }

2 Answers 2

1
this.checkImageExists(result['frontImage'], function (existsImage) {

This causes this to become the function scope. Stick with the arrow notation:

this.checkImageExists(result.data.frontImage, (existsImage) => {
5
  • +1 I think OP is doing an imperative call to apex, so result.data won't be needed, just result is fine. Commented Aug 26, 2020 at 17:07
  • Also, the alert statements are missing this. --> alert('this.frontImage: ' + frontImage); Commented Aug 26, 2020 at 17:10
  • 1
    @rahulgawale Yeah, that was my fault. Still, definitely a scoping issue.
    – sfdcfox
    Commented Aug 26, 2020 at 17:18
  • Indeed it was scoping the issue and you got it in the first place as you do every time. You are just awesome!! @sfdcfox Commented Aug 26, 2020 at 17:23
  • Thanks.. that did it. Commented Aug 26, 2020 at 18:22
2

Your code is working. You're getting tripped up by asynchronous callbacks.

The code executes in this order:

              // 1
              this.checkImageExists(result['frontImage'], function (existsImage) {
                  // 3
                  this.frontImage = result['frontImage'];
              });

              // 2
              alert('let frontImage: ' + frontImage);

Your callback executes long after your top level code finishes executing. Javascript doesn't execute top to bottom when there are asynchronous callbacks involved. Callbacks execute much later.

I'd also suggest using console.log() to debug your code instead of alert, as console commands don't block code execution.

1
  • Thanks.. you also right.. but sfdcfox was more precisely... Commented Aug 26, 2020 at 18:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .