LWC Wired Apex to Custom Data Type

Question

I have a requirement to display a data table for open and closed activities based on on some criteria that is from a managed packaged. The challenge was that you can not access the open and closed activity tables directly but need to do it with a subquery. I am trying to flatten out the data in Apex before I return it to the client so it can be displayed in a lightning:datatable. But I keep getting a value of [object object] in my my console log. I am hoping a better JS dev can tell me what I am missing here. I have tried to use JSON.Parse and JSON.Stringify but no luck.

Here is my controller

@AuraEnabled(Cacheable=true)
    public static List<OpenActivityWrapper> getOpenActivities(String groupId){
        List<String> resultList = new List<String>();
        Set<Id> accountIds = getAccountIds(groupId);
        List<BA_EIMA_activityController.OpenActivityWrapper> openActivityWrappers = new List<BA_EIMA_activityController.OpenActivityWrapper>();

        List<Account> openActivities = [SELECT Id, Name,
        (SELECT ActivityDate, Account.Name, Account.Id, Subject, IsTask, WhatId, Description, EndDateTime,
        Status, Priority, APX_Assigned_To_Name__c, APX_Assigned_To_User__c
        from OpenActivities) FROM Account where Id =: accountIds];
        System.debug(openActivities);

        for (Account a : openActivities ){
            resultList.add(a.Name);
            for(OpenActivity activity : a.openActivities){
                BA_EIMA_activityController.OpenActivityWrapper wrapper = new BA_EIMA_activityController.OpenActivityWrapper(
                        a.Id, a.Name, activity.Subject, activity.Status, activity.IsTask, activity.EndDateTime
                );
                openActivityWrappers.add(wrapper);
            }
        }
        System.debug('value in wrapper = ' + openActivityWrappers);
        System.debug('value from result list = ' + resultList);
        return openActivityWrappers;
    }
     public class OpenActivityWrapper{
        Id  accountId;
        String accountName;
        String subject;
        String activityStatus;
        Boolean isTask;
        Datetime closeDate;

        public OpenActivityWrapper(String accountId, String accountName, String subject, String activityStatus,
                Boolean isTask, Datetime closeDate){
            this.accountId = accountId; this.accountName = accountName; this.subject = subject;
            this.isTask = isTask; this.activityStatus = activityStatus; this.closeDate = closeDate;
       }
    }

JS file

import {LightningElement, track, wire, api} from 'lwc';
import getOpenActivities from '@salesforce/apex/BA_EIMA_activityController.getOpenActivities';

export default class BaEimaOpenRelationshopGroupActiviities extends LightningElement {


    @track accounts;
    @track error;
    @api recordId;   

    @wire(getOpenActivities, {groupId: '$recordId'})
    activities({error, data}) {
        if (data) {
            this.accounts = data;
            console.log(`value of accounts = ${JSON.stringify(this.accounts)}`);
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.accounts = undefined;
        }
    };

Markup

<template>
    <lightning-card title="Open Activities">        
        <template if:true={accounts} for:each={accounts} for:item="account">
            <li key={account.Id}>
                {account.Name}
            </li>
        </template>
    </lightning-card>
</template>

The return in the debug log looks like

2:49:15:052 USER_DEBUG [31]|DEBUG|value in wrapper = (OpenActivityWrapper:[accountId=0013C00000Bkh6EQAR, accountName=EIMA TEST HK1, activityStatus=Not Started, closeDate=null, isTask=true, subject=Follow-up], OpenActivityWrapper:[accountId=0013C00000C4PFBQA3, accountName=EIMA TEST HK 2, activityStatus=Not Started, closeDate=null, isTask=true, subject=Call])

Answer 1

The issue is in your wrapper class. Each variable in your wrapper should be annotated with AuraEnabled to be displayed back in the UI.

public class OpenActivityWrapper{

        @AuraEnabled
        public Id  accountId { get; set; }
        @AuraEnabled
        public String accountName { get; set; }
        @AuraEnabled
        public String subject { get; set; }
        @AuraEnabled
        public String activityStatus { get; set; }
        @AuraEnabled
        public Boolean isTask { get; set; }
        @AuraEnabled
        public Datetime closeDate { get; set; }
}

Have a look at LWC recipe for how to pass complex Apex Datatype to and fro from apex to JS: https://github.com/trailheadapps/lwc-recipes/blob/master/force-app/main/default/classes/CustomWrapper.cls