0

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);
    }

2
  • In aura:iteration, I see no reference of variable 'rec'. In your controller function 'fnOnchange', I am not quite following objTemp["var1"] = ''; ..... objTemp["var4"] = ''; could you please update a cleaner code and maybe we can start from that?
    – Wayne Ni
    Nov 28, 2022 at 6:54
  • listRecords.push({'var1' : '', 'var2' : '', 'var3' : '', 'var4' : ''}); Does this change make it a bit cleaner?
    – where
    Nov 28, 2022 at 7:01

1 Answer 1

0

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:

enter image description here

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .