Lightning Web Component Accessing Attributes From Wrapper Class Without Explicitly Setting individual Attributes or Using Iteration

Question

I've created a wrapper class and have denoted each attribute with @AuraEnabled

public Class RecipientWrapper {
        @AuraEnabled public String FirstName;
        @AuraEnabled public String LastName;
        @AuraEnabled public String email;
}

On calling my apex function from my component it returns the data from the wrapper class ok.
(A list of RecipientWrappers)

I try to set one single attribute recipient to represent the first entry in the wrapper data and within my HTML to access each field from this one attribute.

recipient;

.then((result) => {
    this.recipient = result.recipients[0];
})

HTML

<template> 
     {recipient.FirstName}
     {recipient.LastName}
     {recipient.email}
</template> 

I get an error for each attribute as undefined.

If I alternatively create separate attributes in my LWC JS

firstName;
lastName;
email;

.then((result) => {
    this.firstName = result.recipients[0].FirstName;
    this.lastName = result.recipients[0].LastName;
    this.email = result.recipients[0].email;
})

I can access firstName, lastName, email in my HTML without any error

<template> 
     {firstName}
     {lastName}
     {email}
</template>

I can also use an iterator as an alternative (for the full list) and this works also.

My question is. Should I not be able to access each attribute of recipient from the one single attribute "recipient" set to the Wrapper result? It seems incorrect to have to set individual parameters/attributes for each attribute/field of the Wrapper?

Thanks in advance for any help on this. It would make for cleaner code to not to have to set individual attributes for each attribute/field of the wrapper result data.

Answer 1

this is what's happening in the first example:

1. recipient is undefined (then function not yet evaluated as it's async)
2. component is being rendered
3. {recipient.firstName} throws an error because the recipient is undefined

There are more possible solutions, one of them is to render attributes when data loaded

<template> 
    <span if:true={recipient}>
        {firstName}
        {lastName}
        {email}
    </span>
</template>

Also as RubenDG mentioned in a comment, JS is case sensitive so be sure to use the same casing as in apex.