Pass object and fields to UI via imperative apex method

Question

I couldnt display the object/field value in UI when passed the resultant object from server controller to track variable. In UI template, I am trying to read as {AssignmentObj.Program__r.name__c). I can console.log the {AssignmentObj.Program__r.name__c) in js file however it is not showing in html file. May I know how can I pass object and its variable by imperative method.

 import { LightningElement ,api,track} from 'lwc';
 import programDetails from '@salesforce/apex/NUI_AssignmentDetailsCtrl.programDetails';



  export default class NxassignmentDetailsLWC extends LightningElement {
@api recordId;
@api open;
@track AssignmentObj;
@api recordIdAsgnmnt;
@track ExpSecClass = 'slds-section slds-theme_default sldx-is-open'; //this starts as section open


connectedCallback()
{
    console.log('connectedcallback');
   // if (typeof this.open === 'undefined') this.open = true;
  //  console.log('open'+ this.open );
   this.getprogramdetails();
}
getprogramdetails(){
programDetails({tLrecordId: this.recordId}).then(result=>{
    if(result)
    { 
        
        
        
        this.AssignmentObj=result;
    }
}).catch(error=> {
    console.log('error on assignment');
})

}

    <template>


    
    <div class ="slds-card" style="margin-top:-0.5%"> 
        <div class={ExpSecClass} id="colorSection" >   
            <!-- Section -->
            <h3 class="slds-section__title">
                <button style="cursor:pointer;"  onclick={toggleSection} id="colorSection1" aria- 
       controls="AssignmentId" class="slds-button slds-section__title-action">
                    <span>
                        <lightning-icon icon-name="utility:switch"
                                        alternative-text="button icon"
                                        size="x-small"
                                        class="slds-section__title-action slds-button__icon_left"> 
        </lightning-icon>
                    </span>
                    <span  class="slds-truncate" title="Assignment Details">Assignment Details</span>
                </button>
            </h3>            
           <div class="slds-section__content" id="AssignmentId" style="width: 100%">
           
               <table class=" tbl slds-table_bordered" style ="width:100%">
                 <tbody>
                    <tr>
                        <td>
                            <div class="slds-form-element__label">
                                <label  for="horizontal-output-id-01">Date of Assignment</label>   
                            </div>
                            <div class="slds-form-element__control">
                             
                                    <lightning-formatted-text>  value=""> </lightning-formatted-text>
                                 
                            </div>  
                        </td>
                        <td>
                            <div class="slds-form-element__label">
                                <label  for="horizontal-output-id-01">Negotiator</label>   
                            </div>
                            <div class="slds-form-element__control">
                                <lightning-formatted-text value={AssignmentObj.Program__r.name}></lightning-formatted-text>
                            </div>  
                        </td>
                        <td>
                            <div class="slds-form-element__label">
                                <label  for="horizontal-output-id-01">Assignment Reason</label>   
                            </div>
                            <div class="slds-form-element__control">
                                <lightning-formatted-text value=""></lightning-formatted-text>
                            </div>  
                        </td>
                        <td>
                            <div class="slds-form-element__label">
                                <label  for="horizontal-output-id-01">Tradelines Assigned</label>   
                            </div>
                            <div class="slds-form-element__control">
                                <lightning-formatted-text value={AssignmentObj.Assigned__c > </lightning-formatted-text>
                            </div>  
                        </td>
                        <td>
                            <div class="slds-form-element__label">
                                <label  for="horizontal-output-id-01">Available Funds</label>   
                            </div>
                            <div class="slds-form-element__control">
                               
                                    <lightning-formatted-text value={AssignmentObj.Funds__c}> </lightning-formatted-text>
                                                                      
                            </div> 
                        </td>
                    </tr>
                </tbody>
              </table>   
       
            </div>   
        </div>
    </div> 

Answer 1

Change the line from AssignmentObj=result; to this.AssignmentObj=result;.

This will cause the result to be correctly set in the tracked AssignementObj and not a create a new block scoped variable with the same name.