function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
AJAYAJAY 

Need to get the data from the result from JS in LWC Component.

Hello,

I have certain cases that have been approved/waiting for approval. I want them to be shown on the home page. For that i have create a LWC Component and if the status is pending for approval a clock kind of icon has to be shown beside the case number and if it is approved a approved icon has to be shown. 

I was trying to check the status value of the case using the '.then(result => '  from JS and update two booleans one for pending for approval and another boolean for approved basing on the status.  but it says undefined.  Below is the code.

 .then(result => {
            this.pageSize = 0;
            this.pageCurrent = 0;
            if (result.length > 0) {
                this.allCases = result;
               // console.log('the sub status',result);
            var data = result;
            console.log('the data is',data);
            if(data.length > 0){
                var length = data.length;
                console.log('the length is ',length);
                var substatusvalue = data.Sub_Status__c;
                console.log('the sub status value is ',substatusvalue);
                if(substatusvalue === 'Pending - Int Approval')
                    pendingApproval = true;
                if(substatusvalue === 'Approved')
                    Approved = true;
            
            }
                console.log('it is coming here?');

The console log are coming clearly for everything. But for  this log,  the value is coming up as undefined.  If i can get this value i can use for the boolean check, i can update the boolean and pass to if true in the Template in HTML and can show the icons.

 console.log('the sub status value is ',substatusvalue);

 

Can Anyone help please?. Or is My approach wrong?

 

Thanks,
Ajay.

 

 

 

David Zhu 🔥David Zhu 🔥
You may change this line   var data = result; to 
  var data = result.data;
AJAYAJAY

Hello @DavidZhu,

That is not working. I changed as you mentioned but cannot see the data in the debug in the inspect element. Here is the code below after modification as you suggested and attac is the inspect element log for the same. 

.then(result => {
            this.pageSize = 0;
            this.pageCurrent = 0;
            if (result.length > 0) {
                this.allCases = result;
               // console.log('the sub status',result);
            var Recorddata = result.data;
            console.log('the data is',Recorddata);
            if(Recorddata.length > 0){
                var length = Recorddata.length;
                console.log('the length is ',Recorddata);

                var substatusvalue = Recorddata.Sub_Status__c;

                console.log('the sub status value is ',substatusvalue);
                if(substatusvalue === 'Pending - Int Approval')
                    pendingApproval = true;
                if(substatusvalue === 'Approved')
                    Approved = true;
            
            }


User-added image

Let me know if i need to change anything.

 

David Zhu 🔥David Zhu 🔥
Change the line
var substatusvalue = recorddata[0].sub_status__c.
The log shows recorddata is  array
AJAYAJAY

Hi,

It is not working. :(

Below is the code : I don't see the console log coming. Also if i remove the code from 

var recordData = result;
console.log('the data is',recordData); 

to the end it is showing me the output in the UI. But when i place this code it is not working.


.then(result => {
            this.pageSize = 0;
            this.pageCurrent = 0;
            if (result.length > 0) {
                this.allCases = result;
                var recordData = result;
                console.log('the data is',recordData);
                if (recordData.length > 0) {
                    this.substatusvalue = recordData[0].Sub_Status__c;   
                    console.log('the value is',substatusvalue);
                }
                 if(this.substatusvalue === 'Pending - Int Approval'){
                     pendingApproval = true;
                 }
                 if(this.substatusvalue === 'Approved'){
                    Approved = true;
                 }


Below is the console log: 

User-added image


 

David Zhu 🔥David Zhu 🔥
the values is assigned to this.substatavalue correctly. 
Log shows you bind this.substatusvalue on html to a lighting-formatted-data-time component which lwc won't accept.
AJAYAJAY
This is my HTML. 

For the field sub status, i wasn't keeping the tag lightning-formatted-data-time:

<template>
    <lightning-card title="My Approved / Pending Approval Cases" icon-name="standard:case">
        <div class="slds-p-left_medium slds-p-right_medium">
            <template if:true={cases}>
                <template for:each={cases} for:item="thisCase" for:index="index">
                    <template if:true={thisCase.showBorder}>
                        <div key={thisCase.Id} style="width: 100%" class="slds-p-top_small"></div>
                        <div key={thisCase.Id} style="width: 100%" class="slds-p-top_small slds-border_top"></div>
                    </template>
                    <table key={thisCase.Id}>        
                    <tr>
                        <td style="width: 33%">Case Number:</td>
                        <td>
                            <button class="gcm_button" onclick={handleNavigateCase} value={thisCase.Id}>{thisCase.CaseNumber}</button>
                            <template if:true={pendingApproval}>
                                <lightning-icon icon-name="action:approval" alternative-text="Approved" title="Approved"></lightning-icon>
                            </template>
                            <template if:true={Approved}>
                                <lightning-icon icon-name="action:approval" alternative-text="Approved" title="Approved"></lightning-icon>
                            </template>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 33%">Account:</td>
                        <td>
                                <button class="gcm_button" onclick={handleNavigateAccount} value={thisCase.AccountId}>{thisCase.Account.Name}</button>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 33%">Due:</td>
                        <td>
                            <lightning-formatted-date-time value={thisCase.Due__c} year="numeric" month="numeric" day="numeric" hour="2-digit" minute="2-digit" hour12="false">
                            </lightning-formatted-date-time>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 33%">Type:</td>
                        <td>{thisCase.Type}</td>
                    </tr>
                    <tr>
                        <td style="width: 33%">Area:</td>
                        <td>{thisCase.Area__c}</td>
                    </tr>
                    <tr>
                        <td style="width: 33%">Sub Area:</td>
                        <td>{thisCase.Sub_Area__c}</td>
                    </tr>
                    <tr>
                        <td style="width: 33%">Status:</td>
                        <td>{thisCase.Status}</td>
                    </tr>
                    <tr>
                        <td style="width: 33%">Sub Status:</td>
                        <td>{thisCase.Sub_Status__c}</td>
                    </tr>
                </table>
                </template>
            </template>
        </div>
        <div class = "slds-p-left_medium">
            <span>
                <lightning-button variant="base" label="Refresh" title="Refresh Data" onclick={connectedCallback}></lightning-button>
            </span>
            <span>
                <lightning-button class="slds-p-left_medium" variant="base" label="Previous" title="Previous Page" onclick={handlePage} value=-1></lightning-button>
            </span>
            <span>
                <lightning-button class="slds-p-left_medium" variant="base" label="Next" title="Next Page" onclick={handlePage} value=1></lightning-button>
            </span>
        </div>
    </lightning-card>
</template>
sreenath reddy 21sreenath reddy 21
Hi ajay,
Did you find the solution for above code. I am also facing the same issue. please help me if you answer