1

I have the following object in Javascript:

[{"Name" : myName,
  "Sub" : [{"Name": mySubname,
            "Items" : [{"Id": a, "Name": b},{"Id": c, "Name": d}, ...]
            }, 
            {...}, ...]
 },
 {...},
 ...
]

When writting the code, I got:

<aura:iteration items="{!v.object}" var="obj">
   <aura:iteration items="{!obj.Sub}" var="s">
           Sub -   {!s.Name}
           Sub -   {!s.Items}  
      <aura:iteration items="{!s.Items}" var="it">
          Item- {!it.Id}  {!prod.Name}                                                              
      </aura:iteration>
    </aura:iteration>
</aura:iteration>

My problem is that it's only rendering til "s.Name". The "s.Items" list, and the inner iteration where the Id and Name are trying to be shown are not being displayed.

Anyone knows if there's a limitation on the number of nested iterations? Any workaround?

Thanks!

3
  • Suggest you debug a bit more e.g. console.log(JSON.stringify(component.get("v.object"))); and change Sub - {!s.Items} to Sub - {!s.Items.length}. Also shouldn't {!prod.Name} be {!it.Name}.
    – Keith C
    Mar 22, 2018 at 14:51
  • Hello @KeithC, when writting Sub - {!s.Items.length} , it shows the number of Items it should appear correctly, but it doesn't print them in the inner loop. Mar 22, 2018 at 14:55
  • 1
    Change {!prod.Name} to {!it.Name}. property prod is not defined anywhere in your markup
    – Raul
    Mar 22, 2018 at 14:59

2 Answers 2

6

Yes, you can nest iterators "infinitely" (up to some really large maximum); it looks like you had an unused value provider name prod in your code. Here's a revised, Short, Self Contained, Correct (Compilable), Example:

<aura:application >
    <aura:attribute name="object"
                    type="List" 
                    default="[ { 'Sub': [
                                { 'Name': 'Row 1',
                                'Items': [
                                { 'Id': 'Id 1', 'Name': 'Name 1' },
                                { 'Id': 'Id 2', 'Name': 'Name 2' }
                             ]
                             },
                             { 'Name': 'Row 2',
                                'Items': [
                                { 'Id': 'Id 3', 'Name': 'Name 3' },
                                { 'Id': 'Id 4', 'Name': 'Name 4' }
                             ]
                             }]}]" />
    <aura:iteration items="{!v.object}" var="obj">
        <aura:iteration items="{!obj.Sub}" var="s">
            Sub -   {!s.Name}
            <aura:iteration items="{!s.Items}" var="it">
                Item- {!it.Id}  {!it.Name}                                                              
            </aura:iteration>
        </aura:iteration>
    </aura:iteration>
</aura:application>

Output:

Sub - Row 1 Item- Id 1Name 1 Item- Id 2Name 2 Sub - Row 2 Item- Id 3Name 3 Item- Id 4Name 4

0
1

Since your Item Id's are objects within an Array, you cant use your current approach easily.

item 1 id would resemble something like it[0].Id

However, since you have several objects in your array, you would have to have be able to increment your array reference on each iteration.

I would recommend you assign your different objects to different attributes from your client-side controller to be able to iterate over them in your markup with the aura:iteration component as you are doing.

You must log in to answer this question.

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