I want to get values in aura:iteration

Question

Entering a number increases the number of rows. The index is displayed, but the data is not displayed. How should I display it?

list year, list month has a picklist of years and months

Ultimately, when selectyear: 2022 / selectmonth: 11 / num: 3 I want it to show as 2022.11 , 2022.12 , 2023.1 .

cmp

   <lightning:combobox
                    class="slds-size_1-of-2"
                    placeholder="select year!"
                    options="{!v.listYear}" value="{!v.selectYear}"
                    name="year" label="year"
                    required="true"
            />
            <lightning:combobox
                    class="slds-size_1-of-2"
                    placeholder="select month!"
                    options="{!v.listMonth}" value="{!v.selectMonth}"
                    Name="month" label ="month"
                    required="true"
            />
   <lightning:input
                    class="slds-size_1-of-2"
                    type="number" name="number" label="number"
                    placeholder="write the number"
                    required="true"
                    onchange="{!c.fnOnChange}"
                    value="{!v.splitNum}"
            />
...

<tbody>
                    <aura:iteration items="{!v.records}" var="rec" indexVar="index">
                        <tr>
                            <lightning:layout>
                                <lightning:layoutItem size="2">
                                    <td>
                                        {!index+1}
                                    </td>
                                </lightning:layoutItem>
                                <lightning:layoutItem size="2">
                                    <td>
                                        (((( 2 combobox data ex)year.month ))))
                                    </td>
                                </lightning:layoutItem>
                               </lightning:layout>
                        </tr>
                    </aura:iteration>
                </tbody>

controller.js

 fnOnChange : function(component, event, helper){
//        var year = component.get("v.selectYear");
//        var month = component.get("v.selectMonth");

        var listRecords = [];
        var lineCount = component.get("v.splitNum");
        var objTemp = {};

        for(var i=0; i<parseInt(lineCount); i++){
            objTemp={};
            objTemp["var1"] = '';
            objTemp["var2"] = '';
            objTemp["var3"] = '';
            objTemp["var4"] = '';
            listRecords.push(objTemp);

        }
        component.set("v.records", listRecords);
    }

Answer 1

I am not too sure how

listRecords.push({'var1' : '', 'var2' : '', 'var3' : '', 'var4' : ''})

can help fulfils your requirement, as you just want to simply display list of records through aura:iteration.

So here I put a simple example, you can refer aura component developer guide for more details. I skip the logic where year and month cascading accordingly based on the 'splitNum', just simply focus on display record if that is okay. But you get the idea.

(Highly recommend to use LWC from now on, aura is no longer as popular as used to be)

Component:

<aura:component access="global" >
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
  <aura:attribute name="records" type="List"/>
  <aura:iteration items="{!v.records}" var="rec" indexVar="index">
    <tr>
        <lightning:layout>
            <lightning:layoutItem size="2">
                <td>
                    {!index+1}
                </td>
            </lightning:layoutItem>
            <lightning:layoutItem size="2">
                <td>
                    Year: {!rec.year} Month: {!rec.month}
                </td>
            </lightning:layoutItem>
        </lightning:layout>
    </tr>
   </aura:iteration>
</aura:component>

Controller:

({
  doInit : function(component, event, helper) {
      var recs = [];
      recs.push({year:2022,month:11});
      recs.push({year:2022,month:12});
      recs.push({year:2023,month:1});
    
      component.set('v.records',recs);
  },    
})

Output: