0

I have passed an array of object from parent to child lwc, in connectedCallback function, it is showing null, although other parameters passed are having value in connectedCallback. Please find my code:

import { LightningElement, api, track } from 'lwc';

import calculateTotal from '@salesforce/apex/webComponentController.calculateTotal';

export default class WebComponentCart extends LightningElement {
    @api productarray;
    @api salestax;
    @api shippingcharges;
    @track calculateTotal;
    @track error;

    connectedCallback(){
        console.log(this.productarray);
        console.log(this.shippingcharges);
        calculateTotal({shippingcharges : this.shippingcharges, salestax : this.salestax, pricebookProductArray : this.productarray})
        .then(result => {
            this.calculateTotal = result;
        })
        .catch(error => {
            this.error = error;
        });
    }
}

Parent code:

<div if:true={isOpenCart}>
        <c-web-component-cart productarray={productArray} shippingcharges={shippingCharges}
           salestax={salesTax}></c-web-component-cart>
    </div>

It is working fine, as I am able to display list in child component, but in connectedcallback, i want to pass the array in apex method, and the value is null. And also in console.log, they are no records.

webcomponentparent.js

handleProductArrayChange(event){
    this.productArray = event.detail.productArray;
    this.isOpenCart = event.detail.isOpenCart;
    this.islistOpen = event.detail.islistOpen;
}

This event is getting fired from another component: webcomponentlist.js

openCart(event){
    this.isOpenCart = true;
    this.cartArray = {isOpenCart : this.isOpenCart, productArray : this.productArray, isListOpen : this.isListOpen};

    const selectedEvent = new CustomEvent("productarraychange", {
        detail: this.cartArray
      });
  
      // Dispatches the event.
      this.dispatchEvent(selectedEvent);

}

Apex Method:

@AuraEnabled(cacheable=true)
public static decimal calculateTotal(Decimal shippingcharges, Decimal salestax, List<PriceBookEntry2> pricebookProductArray){
    System.debug(shippingcharges); //7.99
    System.debug(salestax); //0.08
    System.debug(pricebookProductArray); // 2 records which are selected but all field values are null.
    Decimal total = 0;
    Decimal calculatedPrice = 0;
    for(PriceBookEntry2 pbe : pricebookProductArray){
        System.debug('pbe.subtotal:'+pbe.subtotal);
        total = total + pbe.subtotal;
    }

    system.debug('total:'+total);

    calculatedPrice = total + salestax + shippingcharges;

    return calculatedPrice;  
    
}
public class PriceBookEntry2{
         @AuraEnabled
         public String priceBookEntryId; 
         @AuraEnabled
         public String productId; 
         @AuraEnabled
         public String productName; 
         @AuraEnabled
         public String productCode;
         @AuraEnabled
         public String priceBookId;
         @AuraEnabled
         public String priceBookName;
         @AuraEnabled
         public Decimal priceUnit; 
         @AuraEnabled
         public Integer quantity;
         @AuraEnabled
         public Decimal subtotal;

         
         public PriceBookEntry2(){
             priceUnit = 0;
             quantity = 0;
             subtotal = 0;
         }
    }

4
  • 1
    We'd need to see your parent code, too. There's no inherent reason why it'd be null from this side. – sfdcfox Jul 2 '20 at 13:23
  • <div if:true={isOpenCart}> <c-web-component-cart productarray={productArray} shippingcharges={shippingCharges} salestax={salesTax}></c-web-component-cart> </div> – user75908 Jul 2 '20 at 13:44
  • That's better, but we also need that component's controller. – sfdcfox Jul 2 '20 at 13:45
  • Actually parent component is able to send the array fine coz I am able to display it using for:each in child component. I am not sure why it is not coming in connected callback. I want to call apex method on load of the component and pass this array. – user75908 Jul 2 '20 at 13:52
0

It sounds like your code is running into a race condition. I'd write this so that the calculation occurs whenever all the data is available:

_shippingcharges;
_salestax;
_productarray;
@api set shippingcharges(value) {
    this._shippingcharges = value;
    this.doCalc();
}
get shippingcharges() {
    return this._shippingcharges;
}
@api set salestax(value) {
    this._salestax = value;
    this.doCalc();
}
get salestax() {
    return this._salestax;
}
@api set productarray(value) {
    this._productarray = value;
    this.doCalc();
}
get productarray() {
    return this._productarray;
}
doCalc() {
    if (this.shippingcharges && this.salestax && this.productarray) {
        calculateTotal({ shippingcharges: this.shippingcharges, salestax: this.salestax, pricebookProductArray: this.productarray })
            .then(result => {
                this.calculateTotal = result;
            })
            .catch(error => {
                this.error = error;
            });
    
    }
}
1

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.