How to use Wrapper classes in lightning component to iterate over wrapper class record list

Question

I wants to use wrapper class object record list in lightning component and iterate over it to display the field values in all records as table. PFB the code that i have written. The problem response.getReturnValue() gives the list size as 0 but my list already contains 3 elements.

Component:

<aura:component implements="force:lightningQuickAction,force:hasRecordId,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome" controller="OpportunityMachineViewController">  
    <aura:attribute name="sObjectInfo" type="Opportunity"/>
    <aura:attribute name="fieldsArray" type="List" default="['Name','OwnerId','CurrencyIsoCode','AccountId']"/>
    <aura:attribute name="recordId" type="String"/>  
    <aura:attribute name="PYCheck" type="Boolean" default="false"/>
    <aura:attribute name="PYListSize" type ="Integer"/>
    <aura:attribute name="PYListObj" type="OpportunityMachineViewController.prodYearWrapper[]" default="[]"/>

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <h3 class="slds-section-title--divider">Opportunity Details</h3>
    <div class="slds-form--stacked slds-p-around--medium slds-m-bottom--x-small">
        <div class="slds-form-element">
            <lightning:recordForm recordId="{!v.recordId}" objectApiName="Opportunity" mode="readonly" fields="{!v.fieldsArray}" columns="2"/>          
        </div>
    </div>
    <h3 class="slds-section-title--divider">Production Year</h3>
    <div class="slds-form--stacked slds-p-around--medium slds-m-bottom--x-small">
        <div class="slds-form-element">
            <aura:if isTrue="{!v.PYCheck}">   
                <aura:iteration items="{!v.PYListObj}" var="item">
                <lightning:button label="Delete" iconName="utility:Delete" variant="border-filled" onClick="{!c.DeleteAnYear}"/>
                    {!item.pyNo}
                    {!item.prodYear.isFRP__c}
                    {!item.quantity}
                </aura:iteration>                               
            <aura:set attribute="else">
                <lightning:button label="Add Year" iconName="utility:Add" variant="border-filled" onClick="{!c.AddAnYear}"/>
            </aura:set>
            </aura:if>
        </div>
    </div>
</aura:component>

Controller:

({   
    doInit : function(component, event, helper) {
        var action= component.get("c.getProductionYear");
        action.setParams({
            "OppId" :"{!v.recordid}"
        });
        action.setCallback(this,function(response){
            var status= response.getState();
            if(component.isValid() && status == "SUCCESS")
            {
                var listOfRecord=  response.getReturnValue();
                alert(listOfRecord.length);
                if(listOfRecord.length>0){     
                    alert('Inside if');
                    component.set("{!v.PYCheck}",true);
                    component.set("{!v.PYListSize}",listOfRecord.length);
                    component.set("{!PYListObj}",listOfRecord);
                }
                else{
                    component.set("{!v.PYCheck}",false);
                }

            }
        })
        $A.enqueueAction(action);
    }
})

Apex Controller:

public class OpportunityMachineViewController{

   public static List<prodYearWrapper> prodYearWraList{get;set;}
   public static integer pycount;
   public static integer pyQuantity ;
   public static string OppIdValue;
    @auraEnabled
    public static List<prodYearWrapper> getProductionYear(String OppId){
        prodYearWraList = new List<prodYearWrapper>();
        OppIdValue=OppId;
        List<Production_Year__c> productionYearList = [Select Id, isFRP__c, Name, Quantity__c, Opportunity__c from Production_Year__c Where Opportunity__c =:OppId order by CreatedDate,Name];
        pycount = 0;
        for(Production_Year__c pYear:productionYearList){
            prodYearWrapper pyWra = new prodYearWrapper();
            if(pYear.Quantity__c!=null)
                pyQuantity = pyQuantity + (Integer)pYear.Quantity__c;
            pyWra.pyNo = pycount;
            pyWra.prodYear = pYear;
            pycount = pycount + 1;
            prodYearWraList.add(pyWra);
        }
        return prodYearWraList;
    }

    @AuraEnabled
     public void getAddYear(){
        integer i;
        if(prodYearWraList.size()==0){
            DateTime dt = System.now();
               Date d = dt.Date();
               i = integer.valueOf(dt.year());
        }
        else{
            String[] strDate=prodYearWraList[pycount-1].prodYear.Name.split('/');
            i = Integer.valueOf(strDate[2]);
            i = i+1;
        }
        prodYearWrapper proYearWra = new prodYearWrapper();
        Production_Year__c proYear = new Production_Year__c();        
        proYear.Name = '12/31/'+string.valueOf(i);
        proYear.Opportunity__c = OppIdValue;
        proYearWra.prodYear = proYear;
        proYearWra.pyNo = pycount;
        prodYearWraList.add(proYearWra);
        pycount = pycount + 1;
    }//end of addYear  

       public class prodYearWrapper{
        @auraEnabled
        public Production_Year__c prodYear{get;set;}
        @auraEnabled
        public integer pyNo{get;set;}

        public prodYearWrapper(){
            prodYear = new Production_Year__c();
        }
    }
}

Answer 1

You do not use merge syntax in component.set. Change those lines to use just valueProvider.attributeName syntax. We can also eliminate the if-else with a little bit of logic.

// if(listOfRecord.length>0){ // Removed If here
    component.set("v.PYCheck",    listOfRecord.length>0);
    component.set("v.PYListSize", listOfRecord.length);
    component.set("v.PYListObj",  listOfRecord);
// } else { // removed else here
    // component.set("v.PYCheck", false); // Combined with above logic
// }