LWC fetching wrapper class

Question

I am fetching wrapper class when i see the apex debug it is showing data is returning but data is not showing in lwc.

public with sharing class payslipsCntrl {
    @AuraEnabled (cacheable = true)
    public static list<payWrap> fetchPayslips(){
        List<payWrap> paywrapList= new List<payWrap>();
        string userid = UserInfo.getUserId();
        string currentContactid = [select contactId from user where id=:userid].contactId;
        System.debug('currentContactid @@ :'+currentContactid);
        String plcId=  [ SELECT Id FROM AVTRRT__Placement__c 
                WHERE  Active__c= true limit 1].Id;
        List<Payslip__c> payslipList= [ SELECT Name, Placement__c, 
                Monthly_Salary__c, Month__c, Month_String__c, Advance_Amount__c
                 ,(SELECT ContentDocumentId FROM ContentDocumentLinks ) 
                FROM Payslip__c
                WHERE Placement__c='a0Go000001o1HWiEAM'];

                for(Payslip__c py : payslipList){
                    payWrap pw1 = new payWrap();
                    for(ContentDocumentLink cd : py.ContentDocumentLinks){
                        pw1.month=py.Month__c;
                        pw1.monthlySalary=py.Monthly_Salary__c;
                        pw1.name=py.name;
                        pw1.placement=py.Placement__c;
                        pw1.monthString=py.Month_String__c;
                        pw1.advanceAmount=py.Advance_Amount__c;
                        pw1.fileDownload=cd.ContentDocumentId;
                        paywrapList.add(pw1);
                        //paywrapList.add(new payWrap(py.name,py.Placement__c,py.Monthly_Salary__c,py.Month__c,py.Month_String__c,py.Advance_Amount__c,cd.ContentDocumentId));                            
                    }       
                } 
                System.debug('paywrapList @@ :'+paywrapList);       
                return paywrapList;
    }
public class payWrap{
        public String name{get;set;}
        public Id placement{get;set;}
        public Decimal monthlySalary{get;set;}
        public Date month{get;set;}
        public String monthString{get;set;}
        public Decimal advanceAmount{get;set;}
        public Id fileDownload {get;set;}
        /*public payWrap(String name, Id placement, Decimal monthlySalary, date month, String monthString,Decimal advanceAmount, Id fileDownload){
            this.fileDownload=fileDownload;
            this.advanceAmount=advanceAmount;
            this.monthString=monthString;
            this.month=month;
            this.monthlySalary=monthlySalary;
            this.placement=placement;
            this.name=name;
        }*/
    }

}

html

<template>
    <lightning-card
                variant="narrow"
                icon-name="standard:opportunity">
            <h1 slot="title">Payslip Details</h1>
            <div class="slds-m-left_small">
                <lightning-datatable 
                data={paySlipsData} 
                columns={payslipColms} 
                key-field="Id" >
            </lightning-datatable></div>

        </lightning-card>
</template>

js

import { LightningElement, wire, track } from 'lwc';
import fetchPayslips from '@salesforce/apex/payslipsCntrl.fetchPayslips';

const payslipColms = [
    {label: 'Name', fieldName: 'name', type: 'text'},
    {label: 'placement', fieldName: 'placement', type: 'text'},
    {label: 'monthlySalary', fieldName: 'monthlySalary', type: 'currency'},
    {label: 'month', fieldName: 'month', type: 'date'},
    {label: 'monthString', fieldName: 'monthString', type: 'text'},
    {label: 'advanceAmount', fieldName: 'advanceAmount', type: 'currency'},
    {label: 'fileDownload', fieldName: 'fileDownload', type: 'text'}
];

export default class PayslipLwc extends LightningElement {
    @track payslipColms=payslipColms ;
    @track paySlipsData;
    @wire(fetchPayslips) 
    fetchPayslipsMap({ error, data }) {
        debugger;
        if (data) {
            this.paySlipsData = data;
            alert('this.paySlipsData@@ '+ JSON.stringify (data) );
            this.error = undefined;
        } else if (error) {
            alert('error2@@ '+ JSON.stringify (error) );
            this.error = error;
            this.paySlipsData = undefined;
        }
}
}

In paySlipsData data is coming empty.

Answer 1

Poonar's comment above helped me figure out the solution but I though it might be easier to post it as an answer so that other folks can see the answer easier.

The issue is that the Wrapper Class variables are not marked as @auraenabled - in the example above these would be changed to:

public class payWrap{
    @AuraEnabled public String name{get;set;}
    @AuraEnabled public Id placement{get;set;}
    @AuraEnabled public Decimal monthlySalary{get;set;}
    @AuraEnabled public Date month{get;set;}
    @AuraEnabled public String monthString{get;set;}
    @AuraEnabled public Decimal advanceAmount{get;set;}
    @AuraEnabled public Id fileDownload {get;set;}
    /*public payWrap(String name, Id placement, Decimal monthlySalary, date month, String monthString,Decimal advanceAmount, Id fileDownload){
        this.fileDownload=fileDownload;
        this.advanceAmount=advanceAmount;
        this.monthString=monthString;
        this.month=month;
        this.monthlySalary=monthlySalary;
        this.placement=placement;
        this.name=name;
    }*/
}