0

I am trying to display numbers in a table where there are two iterations. but if I use indexVar attribute the numbers are not displaying in sequence. Is there any solution to it? Is there any other function or attribute which I can use?

 <table class="slds-table slds-table_bordered slds-table_cell-buffer">
            <thead>
                <tr class="slds-text-title_caps">
                    <th class="slds-text-align_right" style="width:3.25rem;">
                        <div class="slds-truncate" title="Name">Item No</div>
                    </th> 
                    <th scope="col" class="slds-text-align_center">
                        <div class="slds-truncate" title="Name">Accounts</div>
                    </th>
                    <th scope="col" class="slds-text-align_center">
                        <div class="slds-truncate" title="Product">Product</div>
                    </th>
                </tr>
            </thead>
            <tbody> 
                <aura:iteration items="{!v.listOfSelectedAccounts}" var="accObj" indexVar ="i">
                    <aura:iteration items="{!v.listOfSelectedProducts}" var="prodObj" indexVar = "j" >                   
                        <tr>
                            <td scope="row"  class="slds-text-align_center" style="width:3.25rem;">
                                {!i+j+1}
                            </td> 
                            <td scope="row" class="slds-text-align_center">
                                <div class="slds-truncate" title="{!accObj.Name}">
                                    <a href="{!'/'+accObj.Id}" target="_blank">{!accObj.Name}</a>
                                </div>
                            </td>
                            <td scope="row" class="slds-text-align_center">                            
                                <div class="slds-truncate" title="{!prodObj.Name}">
                                    <a href="{!'/'+prodObj.Id}" target="_blank">{!prodObj.Name}</a>
                                </div>
                            </td>
                        </tr>                        
                    </aura:iteration>
                </aura:iteration>
            </tbody>
        </table>

enter image description here

Improve this question
1
  • if your data is stored in an array of objects "listOfSelectedAccounts", you can use a sort function to structure the data before rendering it . Array.prototype.sort()
    – glls
    Mar 20, 2021 at 14:35

1 Answer 1

Reset to default
0

If you are wondering why the S.NO. is in increasingly pulsating sequence then it is because of this expression.

{!i+j+1}

After a lot of thought I guess this is what you can use if you still want to calculate serial number in cmp file.

{!i + j + (productList.length -1 × i) +1 }

If you want to sort the accounts and display sequence numbers you should do it beforehand in the javascript, put them in a single array and calculate the values in JS.

Improve this answer

You must log in to answer this question.

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