How to iterate sub query on lightning page

Question

I want to display the contact names and opportunity names where AccountID is not null, I am able to display the contact names, can someone please help me to display the opportunity names too?

Below is the code I am using to display the data.

component:

<aura:component controller="OpConAccountApexController">
    <aura:attribute name="ListOfData" type="Contact[]"/>
    <aura:attribute name="ColumnNames" type="List" />

    <aura:handler name="init" value="{!this}" action="{!c.Init}" />

    <!--for columns there would be an attribute type List-->
    <!--for data there would be an attribute of Sobject array -->
    <lightning:datatable data="{!v.ListOfData}"
                         columns="{!v.ColumnNames}" 
                         keyField="Id" />
</aura:component>

Controller:

({
    Init : function(component, event, helper) {
        //setting the fields of the columns 
        component.set('v.ColumnNames', [
            {label: 'Contact Name', fieldName: 'Name', type: 'Text'},
            {label: 'Opportunity Name', fieldName: 'opportunity.Name', type: 'Text'}
        ]);
        helper.getData(component);
    }
})

Helper:

({
    getData : function(component) {
        var action = component.get('c.getDetails');

        action.setCallback(this, function(response) {
           var state =  response.getState();
            if(state === "SUCCESS") {
                //ContactList attribute of Contact array type
                console.log('values: '+ response.getReturnValue());
                component.set('v.ListOfData', response.getReturnValue());
            }else if(state ==="ERROR") {
                var error = response.getError();
                console.log('Failing with the: '+ error);
            }
        });
        $A.enqueueAction(action);
    }
})

Apex Controller:

public class OpConAccountApexController {

    @auraEnabled
    public static List<Contact> getDetails() {

        List<Contact> Contacts = [SELECT ID, Name,(SELECT Name FROM Opportunities where AccountID != null)
                                  FROM Contact where AccountID != null];

        return Contacts;        
    }
}

Answer 1

If you don't want to create your own table and you simply want a list of opportunities, you can preprocess the data when it arrives from the server.

You would perform this from here (probably best as a seperate method, but for now just do it the way I do)

if(state === "SUCCESS") {
    var contacts = response.getReturnValue();
    var oppNames = [];
    contacts.forEach(contact => {
      if (contact.Opportunities && contact.Opportunities.length > 0){
        contact.Opportunities.forEach(opp => {
          oppNames.push(opp.Name);
        });
        contact['Opportunities'] = oppNames.join(' - ');
      }
    });
    component.set('v.ListOfData', contacts);
}

This just grabs the Opportunities array and turns it into a string on the contact object that you can use in the table.

One thing... check the name of the Opportunities array - I'm not totally sure if it's Opportunity or Opportunities. Also, remember, Lightning is case sensitive, so make sure you get those names exactly correct!