+ Start a Discussion
Kishan Kumar 77Kishan Kumar 77 

I have created lightning web component which uses lightning data-table to display opportunity. In each row i have added a button that calls a method and performs http callout. But i am getting an error that i cannot rectify.

--------------js file----------------------------------------------
import { LightningElement, track } from 'lwc';
import getOppList from '@salesforce/apex/customSearchController.getOppList';
import {ShowToastEvent} from 'lightning/platformShowToastEvent'
export default class CustomSearch extends LightningElement {
    @track opportunity;
    sVal='';
    receivedMessage;
    @track record = [];
    @track columns=[
        {label: 'Name', fieldName: 'Name',type: 'url', 
        typeAttributes: { 
            label: {
                fieldName: 'Name'
            } 
        },
        sortable: true },
          {label: 'Account Name', fieldName: 'AccountId',type: 'url', 
        typeAttributes: { 
            label: {
                fieldName: 'AccountId.Name'
            } 
        }, 
        sortable: true},
        {label: 'Stage Name', fieldName: 'StageName',type: 'picklist'},
        {label: 'Type', fieldName: 'Type',type: 'picklist'},
        {label: 'Amount', fieldName: 'Amount',type: 'currency'},
        {label:'Action',type:'button',typeAttributes: {
            label: 'Send Data',
            name: 'Send',
            disabled: false,
            value: 'send',
            iconPosition: 'left'
        }
    }
    ];
    // update sVal var when input field value change
    updateSeachKey(event) {
        this.sVal = event.target.value;
    }
 
    // call apex method on button click 
    handleSearch() {
        // if search input value is not blank then call apex method, else display error msg 
        if (this.sVal !== '') {
            getOppList({
                    searchKey: this.sVal
                })
                .then(result => {
                    // set @track opportunities variable with return contact list from server  
                    this.opportunity = result;
                })
                .catch(error => {
                    // display server exception in toast msg 
                    const event = new ShowToastEvent({
                        title: 'Error',
                        variant: 'error',
                        message: error.body.message,
                    });
                    this.dispatchEvent(event);
                    // reset contacts var with null   
                    this.opportunity = null;
                });
        } else {
            // fire toast event if input field is blank
            const event = new ShowToastEvent({
                variant: 'error',
                message: 'Search text missing..',
            });
            this.dispatchEvent(event);
        }
    }
    handleRowAction(event){
        const row = event.detail.row;
        switch(actionName) {
            case 'Send':
            this.record = row;
            const calloutURI = 'https://herokuapp.com';
            fetch(calloutURI, {
                method: "POST",
                headers: {
                    "Accept": "application/json"
                  },
                  body:  JSON.stringify(record)
            })
            .then((response) => {
                       return response.json(); 
                })
                .then(responseJSON => {
                    console.log(responseJSON);
                    console.log(record);
                })
                .catch(error => {
                    const event = new ShowToastEvent({
                        title: 'Error',
                        variant: 'error',
                        message: error.body.message,
                    });
                    this.dispatchEvent(event);
                });
        }
    }
}
---------------html file---------
<template>
   <div class="slds-m-around_medium">
     
        <div class="slds-m-bottom_small">
            <lightning-input type="text"
               value={sVal}
               label="Search Opportunity"
               onchange={updateSeachKey}
               ></lightning-input>
         </div>
         
         <lightning-button label="Search"
            onclick={handleSearch}
            variant="brand"></lightning-button>
            
            <lightning-datatable data={opportunity} columns={columns} key-field="id" onrowaction={handleRowAction}>
            </lightning-datatable>
</div>
</template>

This is the error i am getting and cannot rectify what's the error.
Thanks in advance!!
David Zhu 🔥David Zhu 🔥
You will need to get the action name from row.

 handleRowAction(event){
        const row = event.detail.row;
        let actionName = event.detail.action.name;
        switch(actionName) {


Additionally, I would suggest move below callout code to Apex code because using callout in js controller is unsafe. It exposes the callout endpoint and how the request data is built.

            const calloutURI = 'https://herokuapp.com';
            fetch(calloutURI, {
                method: "POST",
                headers: {
                    "Accept": "application/json"
                  },
                  body:  JSON.stringify(record)
 
Kishan Kumar 77Kishan Kumar 77
Even after getting the action name i am getting the same error. Also if you can help me with the callout part it will be very helpful because i am not sure whether my code is correct or not.