LWC call Apex method with parameters

Question

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

Answer 1

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.