My API is getting called 2 times In Ionic

Question

I am working in my Ionic Project and my API is getting called 2 times. I am not able to get why my API is getting called 2 times.

This is my productdetails.html:

<ion-col *ngIf="hassizenot && product.out_of_stock == 0" style="padding: 0px;">
      <button class="mybtn11" (click)="addtocartnew(product)" ion-button small>
        Add to Cart
      </button>
</ion-col>

This is my productdetails.ts:

addtocartnew(detailsp)
{
this.storage.get("ID").then((val) =>
    {
      if(val)
      { 
        if(detailsp.SelectedSize)
        {
          let usercartnewdetails = {
            user_id: val,
            product_id: detailsp.id,
            size: detailsp.SelectedSize,
          };
          this.restProvider.usercartproducts(usercartnewdetails, 'user_cart/'+detailsp.id+'/'+val+'/'+detailsp.SelectedSize).subscribe((data) => {
            if (data) {
              console.log("One");
              this.responseEdit = data;
              console.log(this.responseEdit.msg);
              if (this.responseEdit.status === 'success') {
                this.presentToast(detailsp.product_name);
              }
              else{
                this.presentToasterror();
              }
            }
          });
        }
        else
        {
          let usercartnewdetails = {
            user_id: val,
            product_id: detailsp.id,
          };
          this.restProvider.usercartproducts(usercartnewdetails, 'user_cart/'+detailsp.id+'/'+val).subscribe((data) => {
            if (data) {
              console.log("Two");
              this.responseEdit = data;
              console.log(this.responseEdit.msg);
              if (this.responseEdit.status === 'success') {
                this.presentToast(detailsp.product_name);
              }
              else{
                this.presentToasterror();
              }
            }
          });
        }
      }
    });
}

This is my Service:

usercartproducts(credentials, type) {
  var headers = new HttpHeaders();
  headers.append('Access-Control-Allow-Origin' , '*');
  headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
  headers.append('Accept','application/json');
  headers.append('Content-Type','application/json');
  headers.append('Access-Control-Allow-Credentials','true');
  headers.append('Access-Control-Allow-Headers','Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');

  return this.http.post(apiUrl + type, credentials, {headers: headers});
}

In my ts file, I am running the API for adding the products to the cart and it is showing only one response in the console but it is calling 2 times because it is adding the 2 times the product and in the network in the chrome, it is calling 2 times.

Any help is much appreciated.

Answer 1

Just Try This In Your Service:

usercartproducts(credentials, type) {
  var headers = new HttpHeaders();
  headers.append('Access-Control-Allow-Origin' , '*');
  headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
  headers.append('Accept','application/json');
  headers.append('Content-Type','application/x-www-form-urlencoded');
  headers.append('Access-Control-Allow-Credentials','true');
  headers.append('Access-Control-Allow-Headers','Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With');

  let v = new FormData();
  for(var k in credentials)v.append(k,credentials[k]);
  return this.http.post(apiUrl + type, v, {headers: headers});
}

This solved my problem.

Answer 2

because you implement yout API twice and your If condition must be wrong change your ts like this.

 addtocartnew(detailsp) {
     if (detailsp.SelectedSize) {
       this.storage.get("ID").then((val) => {
         if (val) {

        let usercartnewdetails = {
          user_id: val,
          product_id: detailsp.id,
          size: detailsp.SelectedSize,
        };
        this.restProvider.usercartproducts(usercartnewdetails, 'user_cart/' + 
        detailsp.id + '/' + val + '/' + detailsp.SelectedSize).subscribe((data) => {
           console.log("One");
           this.responseEdit = data;
           console.log(this.responseEdit.msg);
           if (this.responseEdit.status === 'success') {
            this.presentToast(detailsp.product_name);
           }
           else {
             this.presentToasterror();
           }
         }
       });
     }
   })
 }
 else {
   this.storage.get("ID").then((val) => {
     if (val) {
       let usercartnewdetails = {
         user_id: val,
         product_id: detailsp.id,
       };
       this.restProvider.usercartproducts(usercartnewdetails, 'user_cart/' + 
       detailsp.id + '/' + val).subscribe((data) => {
         if (data) {
           console.log("Two");
           this.responseEdit = data;
           console.log(this.responseEdit.msg);
           if (this.responseEdit.status === 'success') {
             this.presentToast(detailsp.product_name);
           }
           else {
             this.presentToasterror();
           }
         }
       });
     }
   })
 }
}

change as per your condition and it will work.