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.
A few points really do matter.
If you use await, your connectedCallback can't proceed until the results come back:
this.result1 = await method1(params);
this.result2 = await method2(params);
This is useful if the order of method calls matter, but usually you just want to go as fast as possible, so wire methods are preferable.
You also need to remember to use try/catch to make sure that errors don't cause the ugly "gray screen of death" errors you get when an uncaught exception occurs. With wire methods, you get this extra try-catch logic for free.
You can also use await in parallel:
// Do not do this if you care about reporting specific errors.
[this.result1, this.result2] = [await method1(params), await method2(params)];
But this is a little more complicated if you get errors.
You can also Promise.all or Promise.allSettled (the latter allows partial success for resolving promises).
Promise.all([method1(params), method2(params)]).then((results)=> {
// Handle results here
});
At the end of the day, the specific circumstances surrounding not just this method, but other methods you may want to call, may determine the choice that you choose.
However, they're all perfectly valid options, and there's not enough of a difference for just a single method to justify overthinking it. Just use whichever you prefer.
Note that none of the pros you mentioned are actually pros for either side, except possibly readability. You still need to check for null/undefined values, you still can cache data either way, and execution order will still be non-deterministic to some extent, as await causes a suspended thread, but everything else outside connectedCallback is free to continue running while your data is being retrieved.
Best Answer
You can use Function.prototype.apply or Function.prototype.call to call the function. Here's an example with Function.prototype.apply:
The difference between the two is that apply accepts a list of parameters (as we're doing here), while call takes individual parameters.
In either case, we specify
thisas the first parameter, which sets thethisinside the function call; we need this to access our controller's properties.