0

I am writing a POST callout from the LWC component and after the callout want to make a toast notification, but getting error in the Javascript file kindly help me out for this.

Code as below :

fetch(URL_FORCE_FUNDS , {
                method: "POST",
                headers: headers,
                body: urlencoded
            })
                .then(function (response) {
                    //this.dataFromServer = response;
                    console.log('Here is the Data from Server == '+JSON.stringify(response));
                    return response.json();
                })
                .then(function (data) {
                    //console.log('data is: ' + JSON.stringify(data))
                    
                    if(data.serviceStatus == 'ERROR') {
                        this.showToast('Error',data.data.errorMessage,'Error');
                        this.closeHandler();
                    }
                });

error i am getting as below

   lwcForceFundOnTroubleshoot.js:4 Uncaught (in promise) TypeError: Cannot set property 'showToast' of undefined
        at eval (lwcForceFundOnTrouble

shoot.js:4)

Note : showToast method i have already defined in the in the Javascript file.

3
  • looks like this is not properly bound in the function body, try using arrow functions which have this from parent context. (data) => {...}
    – Damecek
    Aug 31 at 7:41
  • can you post any example here.. that will be helpfull
    – Riyan
    Aug 31 at 7:46
  • .then((response) => { //this.dataFromServer = response; console.log('Here is the Data from Server == '+JSON.stringify(response)); return response.json(); }) .then((data) => { //console.log('data is: ' + JSON.stringify(data)) if(data.serviceStatus == 'ERROR') { this.showToast('Error',data.data.errorMessage,'Error'); this.closeHandler(); } });
    – Damecek
    Aug 31 at 8:21
2

I personally recommend using await/async, as it's far easier to read:

try {
  const response = await fetch(URL_FORCE_FUNDS, { method: 'POST', headers, body: urlencoded});
  console.log('Here is the Data from Server == '+JSON.stringify(response));
  if(response.serviceStatus == 'ERROR') {
    this.showToast('Error', response.data.errorMessage,'Error');
    this.closeHandler();
  }
} catch(e) {
  // Do something with error here
}

Note that the method this is contained in must have the keyword async:

async myMethod() {
  // ...
3

this looks like is an error on this evaluation as @Damecek suggested.

I also suggest using arrow functions for this:

fetch(URL_FORCE_FUNDS, {
    method: "POST",
    headers: headers,
    body: urlencoded
  })
  .then((response) => {
    console.log('Here is the Data from Server == ' + JSON.stringify(response));
    return response.json();
  })
  .then((data) => {
    if (data.serviceStatus == 'ERROR') {
      this.showToast('Error', data.data.errorMessage, 'Error');
      this.closeHandler();
    }
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.