I have a Lightning component with two <aura:iteration>
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:attribute name="invoices" type="Object" />
<aura:attribute name="invoiceLines" type="Object" />
<aura:iteration aura:id="invoiceList" items="{!v.invoices}" var="invoice">
<c:lightningFormElementOutput label="Invoice ID" value="{!invoice.Name}" />
<c:lightningFormElementOutput label="Person" value="{!invoice.Person__r.Name}" />
<c:lightningFormElementOutput label="Status" value="{!invoice.Status__c}" />
<c:lightningFormElementOutput label="Total" value="{!'£' + invoice.Total_Amount__c}" />
</aura:iteration>
<h3 class="slds-section__title">
Invoice Lines ({!v.invoiceLines.length})
</h3>
<aura:iteration aura:id="invoiceLineList" items="{!v.invoiceLines}" var="invoiceLine">
<c:lightningFormElementOutput label="Line ID" value="{!invoiceLine.Name}" />
<c:lightningFormElementOutput label="Invoice ID" value="{!invoiceLine.Invoice__r.Name}" />
<c:lightningFormElementOutput label="Description" value="{!invoiceLine.Description__c}" />
</aura:iteration>
The two datasources invoices and invoiceLines are set in the doInit method:
doInit: function (cmp, event, helper) {
let params = {};
params.appointmentId = cmp.get("v.recordId");
helper.callAction(cmp, "c.getInvoices", params, function (invoices) {
if (invoices) {
cmp.set("v.invoices", invoices);
var invoiceLines = [];
invoices.forEach(i => {
console.log('i.Invoice_Lines__r');
console.log(i.Invoice_Lines__r);
invoiceLines.push(i.Invoice_Lines__r);
});
console.log('invoiceLines');
console.log(invoiceLines);
cmp.set("v.invoiceLines", invoiceLines);
}
});
},
Each of the console.log statements returns expected data.
And notice the H3 with Invoice Lines ({!v.invoiceLines.length}) that outputs a value.
Yet the second <aura:iteration> does not render any values.
- Why is this happening?
- How do I fix it?