New to LWC and looking to call an Apex method and get data to display. It seems I'm missing something here. I get nothing back and don't see any error. Is there anything I'm missing?
Javascript file:
import { LightningElement, api, wire, track } from 'lwc';
import getMyList from '@salesforce/apex/ListDetailsClass.getMyLists';
export default class ApexWireMethodToProperty extends LightningElement {
@api listGroup;
@api recordId;
@api objectApiName
@track mylists;
@track error;
connectedCallback() {
this.recordId = this.recordId;
this.objectApiName = this.objectApiName;
}
@wire(getMyList, { groupLabel: '$listGroup', objectName: '$objectApiName', recordId: '$recordId' })
wiredFlows({ error, data }) {
if (data) {
this.mylists = data;
this.error = undefined;
} else if (error) {
this.error = error;
this.mylists = undefined;
}
}
}
HTML file:
<template>
<template for:each={mylists} for:item='listItem'>
<div key={listItem.Name} class="slds-col slds-small-size_12-of-12 slds-medium-size_6-of-12">
123
</div>
</template>
</template>
Apex Class method:
@AuraEnabled(cacheable=true)
public static string getMyLists(string groupLabel, String objectName, Id recordId) {
try {
List<Financials__c> financials = [SELECT Id, Name, Dependent_On__c, Record_Type_Developer_Name__c, FROM Financials__c WHERE Label__c = :groupLabel ORDER BY Order_Number__c];
System.debug('my return value: ' + JSON.serialize(financials));
return JSON.serialize(financials);
} catch (Exception ex) {
System.debug('exception:' + ex);
return '';
}
}
This is part of migration from Aura to LWC so Apex works with Aura component and it is tested. Apex class is called successfully by LWC as well and problem seem to be with consuming data coming in from Apex
Best Answer
As mentioned in comments, what is happening is your Apex is returning
JSON.serialize()
which is aString
.Then, you simply assign that
string
tomylists
and expect to iterate over it withfor:each
. This will not work.The recommended approach is to switch your Apex code to return models, e.g. like so
Additionally, your app does not perform OLS nor FLS checks. While this may be working okay for you now, the behaviour is not guaranteed, and using those will provide a facility for displaying meaningful error messages to your users.