how to display data from subquery in LWC data table

Question

I am trying to display results from the apex on to the data table,the subqeury should return only 1 record for each parent record. able to display the fields from the parent object but the child records from the subquery is returned as a collection so what kind of manipulation of data do I need to do here to get this working.

Apex

  public with sharing class Controller {
        @AuraEnabled
        public static List<ContentDocument> getContentDocument(Id recordId){
            try {
                return [SELECT Title, (Select ContentUrl from ContentVersions where IsLatest=true),(Select LinkedEntityId from ContentDocumentLinks where LinkedEntityId=:caseId) FROM ContentDocument ];
                
            } catch (Exception e) {
                throw new AuraHandledException(e.getMessage());
            }
        }
        

}

JS

import { LightningElement,api,wire } from 'lwc';
import getContentDocument from '@salesforce/apex/Controller.getContentDocument';


const columns = [
    { label: 'File Name', fieldName: 'Title', type: 'text' },
    { label: 'File Type', fieldName: 'FileType', type: 'text' },
     { label: 'URL', fieldName: 'ContentUrl', type: 'URL' }
];

export default class DocumentCenter extends LightningElement {

@api recordId;
documents;
columns = columns;


@wire(getContentDocument, { $recordId: '$recordId' })
getContentDocument({ error, data }) {
        if (data) {
           
            this.documents = data;  
        } else if (error) {
            
        }
    }

HTML

<template>
    
    <lightning-card>
        
        <template if:true={documents}>
            <lightning-datatable
                key-field="Id"
                data={documents}
                columns={columns}
            >
           </lightning-datatable>
        </template>
    </lightning-card>
</template>

Answer 1

Use below code

Apex

public with sharing class  Subquery_15Nov {
     @AuraEnabled (cacheable=true)
        public static List<Account> getContacts(){
            try {
                System.debug('apex called');
                return [SELECT id, Name, (Select name from Contacts where lastName != null) FROM Account where id = 'Account Id'];
                
            } catch (Exception e) {
                throw new AuraHandledException(e.getMessage());
            }
        }
}

LWC

JS

import { LightningElement,api,wire } from 'lwc';
import getContacts from '@salesforce/apex/Subquery_15Nov.getContacts';


const columns = [
    { label: 'Name', fieldName: 'Name', type: 'text' }
];

export default class subquery_15Nov extends LightningElement {

@api recordId;
accounts;
contacts;
columns = columns;


@wire(getContacts)
getContact({ error, data }) {
        console.log('inside wire ');
        if (data) {
            console.log('data ', JSON.stringify(data));
            this.accounts = data;

            this.accounts.forEach(element => {
                console.log('Contacts' , element.Contacts);
                this.contacts = element.Contacts;
            });

        } else if (error) {
            
        }
    }

}

HTML

<template>
    
    <lightning-card>
        
        <template if:true={accounts}>
            <lightning-datatable
                key-field="Id"
                data={accounts}
                columns={columns}
            >
           </lightning-datatable>
        </template>

        <template if:true={contacts}>
            <lightning-datatable
                key-field="Id"
                data={contacts}
                columns={columns}
            >
           </lightning-datatable>
        </template>
        
    </lightning-card>
</template>