I'm trying to understand why there's a discrepancy in how you access data from a wired property depending on whether the data is a single record, or a collection (i.e returned by an apex method).
Single Record
When working with a single record, the template can display by data by using a getter method or using the long data.fields.name... syntax directly, see below where I'm querying two fields
@wire(getRecord, { recordId: '$recordId', fields: [ accountName,'Account.Industry' ] } )
account;
get name(){
return this.account.data.fields.Name.value;
}
Then, in the template, I can access them with a getter or directly
<template if:true={account.data}>
{name} - {account.data.fields.Industry.value}
</template>
Collection
However, when working with a returned collection, it seems we can access the fields directly by iterating over the object.data property, for example
export default class ApexWireMethodToProperty extends LightningElement {
@wire(getContactList) contacts;
}
Then the template can access the data as follows
<template if:true={contacts.data}>
<template for:each={contacts.data} for:item="contact">
<p key={contact.Id}>{contact.Name}</p>
</template>
</template>
Notice how the template doesn't need to use the long syntax of
contact.data.fields.Name.value
If I try to use this shorter syntax in a single record component, it doesn't work. For example if we redo the first example
<template if:true={account.data}>
{account.data.Industry} <<<< Does not work!
</template>
Why?