AEM Sightly iterate through list using data-sly-list

In this article we will learn how we can iterate through the resouce list and create our frontend, according to sightly documentation of resource block, so supose if i want to create a slider, you first need the sightly responce and after then you will be able to itrate the list in sightly so lets create a simple xml component where user can add the data and then we will iterate list in aem sightly, let now create a slider in our _cqdialog.xml .

  <historyModule jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                composite="true"
                                class="full-width"
                                fieldLabel="Add Collection Product Banners">
                                <field jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/foundation/form/fieldset"
                                    eaem-nested="NODE_STORE"
                                    name="./carouselItems">
                                    <layout jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/foundation/layouts/well"
                                        method="absolute" />
                                    <items jcr:primaryType="nt:unstructured">
                                        <column jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/container">
                                            <items jcr:primaryType="nt:unstructured">
                                                <yearTag jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/foundation/form/textfield"
                                                    fieldDescription="Enter year"
                                                    fieldLabel="Enter year"
                                                    name="./yearTag" />
                                               
                                            </items>
                                        </column>
                                    </items>
                                </field>
                            </historyModule>

In above code we have created history module where we have added items field and in item we defiled different names so while authoring user can add multiple items or no of slider, now we will use these attributed to fetch data on html sighlty, now lets write below sightly code to fetch the component data wath user authored

 <sly data-sly-list.historyDetials="${resource.listChildren}">
                <sly data-sly-list="${historyDetials.listChildren}">
                    <div
                        class="iwc-switch-box iwc-hidden"
                        data-year="${item.valueMap.yearTag}-${itemList.index}"
                    >
                        <h3 class="iwc-watch-title">
                            ${item.valueMap.watchTitle}
                        </h3>
                    </div>
                </sly>
            </sly>

in above code we are using resource method to iterated between the lists in sightly, we are storing the resource data in historyDetials and in next sly tag we are iterating that so the div inside the ${historyDetials.listChildren} will be repeated multiple time as the no of list available in resouce as data and to fetch the perticuler data form the object we will attached the name with the object as shown above ${item.valueMap.watchTitle}

there ase more more oprations we can apply on the resource listing in sightly as below

To check the last item on the list

 <div data-sly-test=${fieldsList.last}> DO SOMETHING BEFORE LAST NODE</div>

to get the total no of lists
So if you have .size(), you can use .size. If you have .length() or .count(). You can use .length or .count.

<div data-sly-test="${historyDetials.size > 2}">
<div data-sly-test="${historyDetials.count > 2}">
 

To get the current index of the iterated list use the below method

<ul data-sly-list="${historyDetials.listChildren}">

<li>${item.name} Page ${itemList.index} of ${itemList.count}</li>

</ul>

In above code you can also apply conditions in you want to iterate certain limit