LWC – Wire Service Not Displaying Data

lightning-web-componentslwc-wire-adapter

I'm creating an LWC that should display all contacts whose birthday is in the current month, I can see in the dev console that the apex class to fetch the data is being called and returning the correct data, however this isn't showing up on the LWC. Here's my code:

upcomingBirthdays.html

<template>
    <lightning-card title="Birthdays This Month">
        <template if:true={contactsData}>
            <ul>
                <template for:each={contactsData} for:item="contact">
                    <li key={contact.Id}>
                        {contact.Name} {contact.BirthDate}
                    </li>
                </template>
            </ul>
        </template>
        <template if:true={error}>
            {error}
        </template>
    </lightning-card>
</template>

upcomingBirthdays.js

import { LightningElement, wire, track } from 'lwc';
import getUpcomingBirthdays from '@salesforce/apex/BirthdayAppController.upcomingBirthdays';

export default class UpcomingBirthdays extends LightningElement {
    @track contactData;
    @track error;

    @wire(getUpcomingBirthdays)
    wiredContacts({data, error}){
        if(data){
            this.contactData = data;
            this.error = undefined;
            console.log(`Data returned: + ${this.contactData}`);
        }
        else if(error){
            this.error = error;
            this.contactData = undefined;
        }
    };
}

BirthdayAppController.cls

public with sharing class BirthdayAppController {
    @AuraEnabled (cacheable=true)
    public static List<Contact> upcomingBirthdays(){
        date currentDate = system.today();
        integer currentMonthInt = currentDate.month();
        string currentMonthStr;
        if(currentMonthInt != null){
            switch on currentMonthInt {
                when 1 {
                    currentMonthStr = 'January';
                }
                when 2 {
                    currentMonthStr = 'February';
                }
                when 3 {
                    currentMonthStr = 'March';
                }
                when 4 {
                    currentMonthStr = 'April';
                }
                when 5 {
                    currentMonthStr = 'May';
                }
                when 6 {
                    currentMonthStr = 'June';
                }
                when 7 {
                    currentMonthStr = 'July';
                }
                when 8 {
                    currentMonthStr = 'August';
                }
                when 9 {
                    currentMonthStr = 'September';
                }
                when 10 {
                    currentMonthStr = 'October';
                }
                when 11 {
                    currentMonthStr = 'November';
                } 
                when 12 {
                    currentMonthStr = 'December';
                } 
                when else {
                    currentMonthStr = '';
                }
            }
        }
        List<Contact> testList = [SELECT Name, BirthDate, BirthdayMonthText__c, BirthdayDayText__c FROM Contact
        WHERE BirthdayMonthText__c = :currentMonthStr
        ORDER BY BirthdayDayText__c ASC];
        System.debug('Test List: ' + testList);
        return [
            SELECT Name, BirthDate, BirthdayMonthText__c, BirthdayDayText__c FROM Contact
                                                                  WHERE BirthdayMonthText__c = :currentMonthStr
                                                                  ORDER BY BirthdayDayText__c ASC
        ];
    }
}

When I initialize the component I can see data being retrieved in the debug logs in the dev console. However the console log statement in the .js file when I inspect in Chrome shows the following and no data is displayed in the LWC:
enter image description here

What am I missing? Thank you!

Best Answer

As soon as I posted I found my own answer. I referenced 'contactsData' in the HTML file, when the name of the variable is 'contactData' in the .js file. I guess sometimes that's really all it takes. :)

Related Topic