Bind a property from a controller - LWC

Question

I recently started to work with LWC, I want to bind a certain field from the controller and use it in my component

My LWC is on the Case object, I have a controller which returns an array of related email messages. What I want to do is to use the 'Incoming' field on my component:

import { LightningElement, api, track, wire } from 'lwc';
import getAllEmailsForRecord from '@salesforce/apex/getRelatedEmails.getAllEmailsForRecord'; 

export default class ShowRelatedRecords extends LightningElement {
    @api recordId;
    @track record;
    @track error;

    @wire(getAllEmailsForRecord, { caseId: '$recordId' }) 
    emails; 

    get incoming() {
        return this.emails.data.fields.Incoming.value;
    }
}

Html:

<template for:each={emails.data} for:item="email">
<lightning-layout-item key={email.Id} size="12">
<div  class="slds-p-around_x-small" >
   <lightning-badge label={incoming}></lightning-badge>
</div>
....

Controller:

public without sharing class getRelatedEmails {
@AuraEnabled(Cacheable=true)
    public static EmailMessage[] getAllEmailsForRecord(Id caseId){
        return [SELECT Id,TextBody, IsExternallyVisible ,Subject,FromAddress,ToAddress,Incoming FROM EmailMessage WHERE ParentId = : caseId];
    }  
}

The result is that the LWC does not load and when I open the chrome debugger I see the following error:

Error: Uncaught (in promise) TypeError: Cannot read property 'Incoming' of undefined at i.get incoming [as incoming]

Answer 1

You are in a loop <template for:each={emails.data} for:item="email"> which means below is how you need to access data for an instance of the record in the data array. Here email is the indidual record attribute which you have declared through for:item="email

 <lightning-badge label={email.Incoming}></lightning-badge>

You are trying to run an expression function on a list of records this.emails.data.fields.Incoming.value but data your data is an array so you need to access specific node of array inside the template if

Solution 2:

Create a child component and put all the contents inside for loop there

Child Component markup:

<template>
    <p>{email.TextBody}</p>
    <div  class="slds-p-around_x-small" >
        <lightning-badge label={incoming}></lightning-badge>
     </div>
</template>

JS File:

import { LightningElement,api} from 'lwc';

    export default class EmailRecord extends LightningElement {
        @api email;
        get incoming() {
            return this.email.Incoming;
        }   

    }

In the parent component where you are getting data change the markup(html template like this) where c-email-record is your child component

<template>

<template for:each={emails.data} for:item="email">
    <lightning-layout-item key={email.Id} size="12">
    <c-email-record email={email}></c-email-record>
    </lightning-layout-item>
</template>    
</template>

within this child component js you can do whatever manipulation of data you want to and then show the UI accordingly

Answer 2

A record isn't loaded immediately; you need to make sure there's a value first:

get incoming() {
    return this.emails && this.emails.data && this.emails.data.fields.Incoming.value;
}

This is true for any time you need to get data from the server.

Answer 3

Alternatively to @sfdcfox's answer, wrap truthiness for the wired variable for any dependent calculations:

<template if:true={emails.data}>
  <lightning-badge label={emails.data.fields.Incoming.value}></lightning-badge>
</template>

Then you can omit the getter completely and move the verbosity to template.

Answer 4

I think in what you have tried to do, you should have just remove fields and select some record, for example, the first one and in such case you would be able not to have an error and access incoming property on the first email message records assuming that you have at least one such record.

import { LightningElement, api, track, wire } from 'lwc';
import getAllEmailsForRecord from '@salesforce/apex/getRelatedEmails.getAllEmailsForRecord'; 

export default class ShowRelatedRecords extends LightningElement {
    @api recordId;
    @track record;
    @track error;

    @wire(getAllEmailsForRecord, { caseId: '$recordId' }) 
    emails; 

    get incoming() {
        return this.emails.data[0].Incoming;
    }
}

Answer 5

Another option is just to use wrapper object list, in such case you don't need additional component to manipulate the data shown

import { LightningElement, api, track, wire } from 'lwc';
import getAllEmailsForRecord from '@salesforce/apex/getRelatedEmails.getAllEmailsForRecord'; 

export default class ShowRelatedRecords extends LightningElement {
    @api recordId;
    @track record;
    @track error;

    @wire(getAllEmailsForRecord, { caseId: '$recordId' }) 
    emails; 

    @track wrappers;
    connectedCallback() {
        getAllEmailsForRecord({ caseId: this.recordId })
        .then(result=>{
            this.wrappers = result.map(function(x){
                return {IncomingOrOutgoingText: x.Incoming ? 'Incoming' : 'Outgoing', origin:x};
            })
        }).catch(error => {
            this.error = error;
        });
    }
}

Html

<template>    
    <lightning-layout>
        <template for:each={wrappers} for:item="emailWrapper">
            <lightning-layout-item key={emailWrapper.origin.Id}>
                <div  class="slds-p-around_x-small" >
                    <lightning-badge label={emailWrapper.IncomingOrOutgoingText}></lightning-badge>
                </div>
            </lightning-layout-item>
        </template>
    </lightning-layout>

</template>