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. Commented Jul 2, 2020 at 13:23
  • <div if:true={isOpenCart}> <c-web-component-cart productarray={productArray} shippingcharges={shippingCharges} salestax={salesTax}></c-web-component-cart> </div> Commented Jul 2, 2020 at 13:44
  • That's better, but we also need that component's controller. Commented Jul 2, 2020 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. Commented Jul 2, 2020 at 13:52

1 Answer 1

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
  • salesforce.stackexchange.com/q/312073/75908 Complete code is present here in the link. Could you please help suggesting why I am getting all fields null when passing records array to apex?@sfdcfox Commented Jul 10, 2020 at 3:50

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.