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
Akshay MhetreAkshay Mhetre 

How to fetch, separate and display value which are coming from apex in LWC.

Hello Experts,

In apex, I am fetching 10 fields and Values by getRecords method and storing in lstRecords=[ ], those fields and Values are displaying in LWC component.

Now I want to split those values. ForExample. 3 of 10 wants to show only in payInRec collapsible section only.(those 3 fields should not come in lstRecords=[ ]. 

Fields Api Name:-

"Service_Charges__c"  ,   "Documentation_Charges__c  , "Dealer_Expence_Reimburse_Amt__c"  

**Just tell me How can I write a code in for loop to restrict those fields and display only sepcific fields.??

<template>
<tbody>
            <template for:each={lstRecords} for:item="keyValue"> 
                <tr key={keyValue.key}>
                    <th scope="col"  height="40" >
                        <div><b>{keyValue.key}</b></div>
                    </th>
                    <th scope="col"  height="40" >
                         <div>{keyValue.value}</div>
                    </th>
                </tr>
            </template>

            <template>
             --HERE I want to display those 3 fields.--
               </template>
              </template>
JS-->
import { LightningElement,wire,api,track } from 'lwc';
import getRecords from '@salesforce/apex/LoanDetailsForCAM.getRecords';
export default class LoanDetails extends LightningElement {
    @api recordId;
    @track lstRecords =[];
    @track payInRec =[];
    @wire (getRecords,{ opp :'$recordId' })fetchData(value) {
    const {
            data,
            error
        } = value;
        if(data){
        for (let key in data) { *IN this loop I want to show only 7 fields.
        this.lstRecords.push({value:data[key], key:key});
        }
        }
        else if(error){
        console.log(error);
        this.lstRecords = [];
        }
          if(data){
        for (let key in data){
*IN this loop I want to show only 3 fields.
        this.payInRec.push({value:data[key], key:key});
        }
        }
        else if(error){
        console.log(error);
        this.payInRec = [];
        }
        }}

 

SwethaSwetha (Salesforce Developers) 
Hi Akshay,
While it is not possible to provide an exact solution for your specific scenario, the below example can help you get started.

- Create an Apex method that returns the desired data. For example, if you want to fetch account records based on an account name, you can create a method like this:
@AuraEnabled(cacheable=true)
public static List<Account> getAccounts(String strAccountName) {
    String strKey = '%'+strAccountName+'%';
    List<Account> accList = [SELECT Id, Name, AccountNumber FROM Account WHERE Name LIKE :strKey];
    return accList;
}

-In your LWC JavaScript file, import the Apex method and use the @wire decorator to call it. Pass any required parameters using the object syntax.
import { LightningElement, wire } from 'lwc';
import getAccounts from '@salesforce/apex/AccountService.getAccounts';

export default class SearchAccount extends LightningElement {
    searchKey = '';
    @wire(getAccounts, { strAccountName: '$searchKey' })
    accounts;
}

-In your LWC HTML file, you can access the data returned by the Apex method using the accounts.data property. You can use an if statement to check if the data is available before displaying it.
<template>
    <input type="text" value={searchKey} oninput={handleKeyChange} />
    <ul if:true={accounts.data}>
        <template for:each={accounts.data} for:item="account">
            <li key={account.Id}>{account.Name}</li>
        </template>
    </ul>
</template>

See related:
https://salesforce.stackexchange.com/questions/343312/fetching-record-data-from-apex-in-lwc

https://www.sfdckid.com/2021/07/how-to-fetch-data-in-lwc-salesforce.html

https://www.apexhours.com/call-apex-method-from-lightning-web-components/

Thanks