I don’t understand, Why is my CalculateTotal () function returning "Null"?

  angular, javascript, typescript

I am trying to create a clothing sales site, I am at the function which calculates the total of the products present in the cart at the localStorage level, but my function returns "null"
I really need help please…

here is the code:

constructor(private productService: ProductService,
          private orderService: OrderService,
          private httpClient: HttpClient,
          private router: Router,
          private spinner: NgxSpinnerService,
          private toast: ToastrService) {

this.cartTotal$.next(this.cartDataServer.total);
this.cartDataObs$.next(this.cartDataServer);

let info: CartModelPublic = JSON.parse(localStorage.getItem('cart')!);

if (info !== null && info !== undefined && info.prodData[0].incart !== 0) {
  // assign the value to our data variable which corresponds to the LocalStorage data format
  this.cartDataClient = info;
  // Loop through each entry and put it in the cartDataServer object
  this.cartDataClient.prodData.forEach(p => {
    this.productService.getSingleProduct(p.id).subscribe((actualProdInfo: ProductModelServer) => {
      if (this.cartDataServer.data[0].numInCart === 0) {
        this.cartDataServer.data[0].numInCart = p.incart;
        this.cartDataServer.data[0].product = actualProdInfo;
        this.CalculateTotal();
        this.cartDataClient.total = this.cartDataServer.total;
        localStorage.setItem('cart', JSON.stringify(this.cartDataClient));
      } else {
        this.cartDataServer.data.push({
          numInCart: p.incart,
          product: actualProdInfo
        });
        this.CalculateTotal();
        this.cartDataClient.total = this.cartDataServer.total;
        localStorage.setItem('cart', JSON.stringify(this.cartDataClient));
      }
      this.cartDataObs$.next({...this.cartDataServer});
    });
  });
}

}

AddProductToCart(id: number, quantity?: number) {

this.productService.getSingleProduct(id).subscribe(prod => {
  // If the cart is empty
  if (this.cartDataServer.data[0].product === undefined) {
    this.cartDataServer.data[0].product = prod;
    this.cartDataServer.data[0].numInCart = quantity !== undefined ? quantity : 1;
    this.CalculateTotal();
    this.cartDataClient.prodData[0].incart = this.cartDataServer.data[0].numInCart;
    this.cartDataClient.prodData[0].id = prod.id;
    this.cartDataClient.total = this.cartDataServer.total;
    localStorage.setItem('cart', JSON.stringify(this.cartDataClient));
    this.cartDataObs$.next({...this.cartDataServer});
    this.toast.success(`${prod.name} added to the cart.`, "Product Added", {
      timeOut: 1500,
      progressBar: true,
      progressAnimation: 'increasing',
      positionClass: 'toast-top-right'
    })
  }  // END of IF
  // Cart is not empty
  else {
    let index = this.cartDataServer.data.findIndex(p => p.product.id === prod.id);

    // 1. If chosen product is already in cart array
    if (index !== -1) {

      if (quantity !== undefined && quantity <= prod.quantity) {
        // @ts-ignore
        this.cartDataServer.data[index].numInCart = this.cartDataServer.data[index].numInCart < prod.quantity ? quantity : prod.quantity;
      } else {
        // @ts-ignore
        this.cartDataServer.data[index].numInCart < prod.quantity ? this.cartDataServer.data[index].numInCart++ : prod.quantity;
      }


      this.cartDataClient.prodData[index].incart = this.cartDataServer.data[index].numInCart;
      this.toast.info(`${prod.name} quantity updated in the cart.`, "Product Updated", {
        timeOut: 1500,
        progressBar: true,
        progressAnimation: 'increasing',
        positionClass: 'toast-top-right'
      })
    }
    // 2. If chosen product is not in cart array
    else {
      this.cartDataServer.data.push({
        product: prod,
        numInCart: 1
      });
      this.cartDataClient.prodData.push({
        incart: 1,
        id: prod.id
      });
      this.toast.success(`${prod.name} added to the cart.`, "Product Added", {
        timeOut: 1500,
        progressBar: true,
        progressAnimation: 'increasing',
        positionClass: 'toast-top-right'
      })
    }
    this.CalculateTotal();
    this.cartDataClient.total = this.cartDataServer.total;
    localStorage.setItem('cart', JSON.stringify(this.cartDataClient));
    this.cartDataObs$.next({...this.cartDataServer});
  }  // END of ELSE


});

}

here is my CalculateTotal() function:

private CalculateTotal() {
let Total = 0;

this.cartDataServer.data.forEach(p => {
  const {numInCart} = p;
  const {price} = p.product;
  // @ts-ignore
  Total += numInCart * price;
});
this.cartDataServer.total = Total;
this.cartTotal$.next(this.cartDataServer.total);

}

and here is the result in the console:I don't understand why the function returns null hereenter code here

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.