0

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.

2
  • There are few typos in your code, e.g. FrstName in the wrapper class, lastname in the last JS and fastName in the last HTML. Keep in mind that JS is CaSEsEnsiTiVe, so a typo could lead to several errors. Could you please provide the exact code you've used and that didn't work? Not just few lines, but the whole js function and the whole html section. – RubenDG Apr 30 at 12:55
  • Hi @RubenDG. Apologies, I typed out the above examples directly in my question. The code was not taken from my component & apex-controller. The typos were just in the question. Apologies for representing it badly. Thanks for looking into it in detail – RedQueries Apr 30 at 13:08
2

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.

2
  • Thank you @ondrakr. Adding the if statement has fixed it. Thanks for your help. – RedQueries Apr 30 at 14:47
  • Thanks again @RubinDG also – RedQueries Apr 30 at 14:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.