[SalesForce] Access the List in wrapper class to LWC

I have a wrapper class in my apex controller.

global without sharing  class Homepage_Ctrl {

    public static List<variableDTO> dtoList = new List<variableDTO>();
    public static variableDTO dto = new variableDTO();

      @AuraEnabled(cacheable=true)
        public static List<variableDTO> getAllDTOs() {
            initErrors();
            dto.updateKm = false;
            dto.agendaActivable = true;
            getTimeLineMonths();
            dtoList.add(dto);
            System.debug(dtoList);
            return dtoList;
        }

    @AuraEnabled(cacheable=true)
        public static void getTimeLineMonths(){
            dto.monthListBefore = new List<String>();
            dto.monthListAfter = new List<String>();
            dto.monthNameMap = new Map<Integer,String>();
            dto.monthNameMap.put(1,Label.CP_MonthJAN.substring(0,3));
            dto.monthNameMap.put(2,Label.CP_MonthFEB.substring(0,3));
            dto.monthNameMap.put(3,Label.CP_MonthMAR.substring(0,3));
            dto.monthNameMap.put(4,Label.CP_MonthAPR.substring(0,3));
            dto.monthNameMap.put(5,Label.CP_MonthMAY.substring(0,3));
            dto.monthNameMap.put(6,Label.CP_MonthJUN.substring(0,3));
            dto.monthNameMap.put(7,Label.CP_MonthJUL.substring(0,3));
            dto.monthNameMap.put(8,Label.CP_MonthAUG.substring(0,3));
            dto.monthNameMap.put(9,Label.CP_MonthSEP.substring(0,3));
            dto.monthNameMap.put(10,Label.CP_MonthOCT.substring(0,3));
            dto.monthNameMap.put(11,Label.CP_MonthNOV.substring(0,3));
            dto.monthNameMap.put(12,Label.CP_MonthDEC.substring(0,3));
            Integer i;

            Date currentDate = System.today().addDays(20);
            for(i=MONTHS_BEFORE;i>0;i--){
                Integer month = currentDate.addMonths(-i).month();
                String monthName = dto.monthNameMap.get(month);
                dto.monthListBefore.add(monthName);
            }
            Integer monthTodayInteger = currentDate.month();
            dto.monthToday = dto.monthNameMap.get(monthTodayInteger);
            for(i=1;i<MONTHS_AFTER+1;i++){
                Integer month = currentDate.addMonths(i).month();
                String monthName = dto.monthNameMap.get(month);
                dto.monthListAfter.add(monthName);
            }
            dto.startDateTLE = currentDate.addMonths(-MONTHS_BEFORE);
            dto.endDateTLE = currentDate.addMonths(MONTHS_AFTER);

            Integer daysInCurrentMonth = Date.daysInMonth(currentDate.year(),currentDate.month());
            Double tempValue = -(TIMELINE_WIDTH / 19) * (currentDate.day() *1.0) / (daysInCurrentMonth * 1.0);
            dto.currentDateMoveOnTL = 'left:'+Math.round(tempValue) + 'px';

        }

global class variableDTO {
            @AuraEnabled
            public String bkImgURL { get; set; }
            @AuraEnabled
            public List<String> monthListBefore {get; set;}
    }
}

And I am trying to access the monthListBefore list in LWC. My code is below.

@track background; 
@track MonthList;

    @wire(getAllDTOs) wrappers ({
            error,
            data
        }) {
            if(data) {
                this.objects = data;
                this.background = data[0].bkImgURL;
                this.MonthList = data[0].MonthListBefore;
                console.log(this.background );
                console.log(this.MonthList );


            } else {
                this.error = error;
            }
        }

Here I got value for this.background but I got undefined for this.MonthList. Is there anything wrong with my code?

I got value MonthListBefore in json when I debug.

"monthListBefore":[ 
"Avr",
"Mai",
"Jui",
"Jui",
"Aoû",
"Sep",
"Oct",
"Nov",
"Déc"
],

Please help me to solve this issue. Thank You.

Best Answer

Javascript is case SEnSiTivE. You have defined variable in apex as monthListBefore but in JS you are trying to access MonthListBefore, which does not exist.

So, Try

this.MonthList = data[0].monthListBefore;