5

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

6
  • Is Apex code marked @AuraEnabled (this method: ListDetailsClass.getMyLists)? Also, what do you see in the network tab in Chrome? Is there an apex action? – zaitsman Feb 3 '20 at 23:50
  • @zaitsman added Apex method. This method works as expected with Aura Component. I have debug statement in Apex which is hit successfully. It is something to do with wiring up data coming from Apex class and showing it in HTML – user569925 Feb 4 '20 at 0:58
  • So it says cacheable=true which means that LDS will only request it once. try saying cacheable=false. In theory LDS is meant to use parameters to distinguish requests but i've not seen that working reliably. – zaitsman Feb 4 '20 at 0:59
  • @zaitsman nothing changes. I see correct data returned in the logs but it is just not displayed by LWC. Seem to be issue with consuming data from Apex – user569925 Feb 4 '20 at 1:02
  • 1
    Yeah of course, i just noticed that you did this: JSON.serialize This is a biggest NO NO in all of web development with a framework, including SF apex. Just return your objects directly... What is happening atm is your mylists is holding string json which, of course, is not iterable in the for:each. To confirm just add {mylists} somewhere in html file – zaitsman Feb 4 '20 at 1:04
3

As mentioned in comments, what is happening is your Apex is returning JSON.serialize() which is a String.

Then, you simply assign that string to mylists and expect to iterate over it with for:each. This will not work.

The recommended approach is to switch your Apex code to return models, e.g. like so

    @AuraEnabled(cacheable=true)
    public static List<Financials__c> 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 financials;
        } catch (Exception ex) {
            System.debug('exception:' + ex);
            return new List<Financials__c>();
        }
    }

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.