Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
srkSFsrkSF 

Passing values to Parent LWC Component using event.detail.value

Hi All,
I am trying to pass values to parent component using event in LWC.
But I am not able to retrieve the fields and use in a SOQL query.
I am getting [Object,Object] as field value.
I am trying to to do JSON.stringify() also.It is showing this
{FieldApiName:{Guest_Hotel_City__c},ObjectApiName:{Guest_Master}}
I need value of that field Guest_Hotel_City__c to make use of it in SOQL query.
Please help!!
Thanks in Advance.
JS code:
import { LightningElement } from 'lwc';
export default class HotelListingComponent extends LightningElement {
    handlechildevent(event){
    const varcityofhotel=event.detail.cityofhotel;
    const varpreferredhoteltype=event.detail.preferredhoteltype;
    var myjson=JSON.stringify(varcityofhotel);
    console.log("value after stringifying:",myjson);
        
        alert('Event handled in Parent Comp');
        alert('Guest Hotel City is: '+varcityofhotel);
        alert('Guest Hotel Type is: '+varpreferredhoteltype);
    }
}
SUCHARITA MONDALSUCHARITA MONDAL

Hi srkSF,

Can you share the code for event in Child Component.

 

Thanks,
Sucharita
srkSFsrkSF
Hi Sucharita,
Thanks for replying.Event code is at the bottom.

Child Component JS code:

import { LightningElement,api } from 'lwc';
import GUEST_OBJECT from '@salesforce/schema/Guest_Master__c';
import FIRSTNAME_FIELD from '@salesforce/schema/Guest_Master__c.Guest_First_Name__c';
import LASTNAME_FIELD from '@salesforce/schema/Guest_Master__c.Guest_Last_Name__c';
import PHONE_FIELD from '@salesforce/schema/Guest_Master__c.Guest_Phone__c';
import EMAIL_FIELD from '@salesforce/schema/Guest_Master__c.Guest_Email__c';
import CITYOFHOTEL_FIELD from '@salesforce/schema/Guest_Master__c.City_of_Hotel__c';
import PREFERREDHOTELTYPE_FIELD from '@salesforce/schema/Guest_Master__c.Preferred_Hotel_Type__c';
import createGuest from '@salesforce/apex/createGuest.createGst';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';


export default class CreateRecordWithFieldIntigrity extends LightningElement {

    fname = FIRSTNAME_FIELD;
    lname = LASTNAME_FIELD;
    phone = PHONE_FIELD;
    email=EMAIL_FIELD;
   @api  cityofhotel=CITYOFHOTEL_FIELD;
   @api preferredhoteltype=PREFERREDHOTELTYPE_FIELD;
   rec = {
       Guest_First_Name__c:this.fname,
       Guest_Last_Name__c:this.lname,
       Guest_Phone__c:this.phone,
       Guest_Email__c:this.email,
       City_of_Hotel__c:this.cityofhotel,
       Preferred_Hotel_Type__c:this.preferredhoteltype     
       
   }
   handleFirstNameChange(event) {
        this.rec.Guest_First_Name__c = event.target.value;
        console.log("FirstName", this.rec.Guest_First_Name__c);
    }
    
    handleLastNameChange(event) {
        this.rec.Guest_Last_Name__c = event.target.value;
        console.log("LastName", this.rec.Guest_Last_Name__c);
    }
    
    handlePhnChange(event) {
        this.rec.Guest_Phone__c = event.target.value;
        console.log("Phone", this.rec.Guest_Phone__c);
    }
    
    handleEmailChange(event) {
        this.rec.Guest_Email__c = event.target.value;
        console.log("Email", this.rec.Guest_Email__c);
    }
    handleCityofHotelChange(event) {
        this.rec.City_of_Hotel__c = event.target.value;
        console.log("CityofHotel", this.rec.City_of_Hotel__c);
    }
    handlePreferredHotelTypeChange(event) {
        this.rec.Preferred_Hotel_Type__c = event.target.value;
        console.log("PreferredHotelType", this.rec.Preferred_Hotel_Type__c);
    }
    

    handleClick() {
        
    
        createGuest({ guest : this.rec })
            .then(result => {
                this.message = result;
                this.error = undefined;
                if(this.message !== undefined) {
                    this.rec.Guest_First_Name__c = '';
                    this.rec.Guest_Last_Name__c = '';
                    this.rec.Guest_Phone__c = '';
                    this.rec.Guest_Email__c='';
                    this.rec.City_of_Hotel__c='';
                    this.rec.Preferred_Hotel_Type__c='';
                    this.dispatchEvent(
                        new ShowToastEvent({
                            title: 'Success',
                            message: 'Guest created',
                            variant: 'success',
                        }),
                    );
                }
                
                console.log(JSON.stringify(result));
                console.log("result", this.message);
            })
            .catch(error => {
                this.message = undefined;
                this.error = error;
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error creating record',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
                console.log("error", JSON.stringify(this.error));
            });
            const evt=new CustomEvent('mycustomevent',{
                detail:
                {
                    cityofhotel:this.cityofhotel,
                    preferredhoteltype:this.preferredhoteltype
                }
        
            });
            this.dispatchEvent(evt);
    }
   
}