Display single item from a list In sightly | Community
Skip to main content
March 7, 2024
Solved

Display single item from a list In sightly

  • March 7, 2024
  • 4 replies
  • 3103 views

Hello Team,

The below code works fine which displays two records .

<div data-sly-list="${myModel.dummyObj @ begin = 0, end = 1}">

                <a href="${item.pageURL}">${item.pageTitle}</a>

</div>

 

but this code is not working to display one record

<div data-sly-list="${myModel.dummyObj @ begin = 0, end = 0}">

                <a href="${item.pageURL}">${item.pageTitle}</a>

</div>.

 

 

Can you please help me with how i can display one record successfully.?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by EstebanBustamante

Hi, 


If you know the index of the record you want to show, you don't have to iterate through the array; you can access it directly using its index, like this:

 

 

My first element: ${myModel.dummyObj[0] @ context='html'}

 

 

If you need to display a specific element of the array but you don't know its index, you can iterate through the array and compare each element to determine if it matches the one you need to render. For example: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/get-value-of-index-2-in-a-slightly-list/m-p/218606 another example

 

 

<ul data-sly-list="${currentPage.listChildren}"> <li data-sly-test=${itemList. first}>This is the first element: ${item.title}</li> </ul>

 

 

You can find more examples in the HTL spec: https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md

 

Hope this helps.

4 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
March 7, 2024

Hi, 


If you know the index of the record you want to show, you don't have to iterate through the array; you can access it directly using its index, like this:

 

 

My first element: ${myModel.dummyObj[0] @ context='html'}

 

 

If you need to display a specific element of the array but you don't know its index, you can iterate through the array and compare each element to determine if it matches the one you need to render. For example: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/get-value-of-index-2-in-a-slightly-list/m-p/218606 another example

 

 

<ul data-sly-list="${currentPage.listChildren}"> <li data-sly-test=${itemList. first}>This is the first element: ${item.title}</li> </ul>

 

 

You can find more examples in the HTL spec: https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md

 

Hope this helps.

Esteban Bustamante
GrishmaBaAuthor
March 8, 2024

Hi @estebanbustamante ,

 

Thanks , it is working fine .

 

Community Advisor
March 7, 2024

Hi @grishmaba 

 

Please try like this,

<ul data-sly-list.child="${currentPage.listChildren}">
  <li>${childList.first}</li>
</ul>


The following default variables are available within the scope of the list:

item: The current item in the iteration.

itemList: Object holding the following properties:

index: zero-based counter (0..length-1).

count: one-based counter (1..length).

first: true if the current item is the first item.

middle: true if the current item is neither the first nor the last item.

last: true if the current item is the last item.

odd: true if index is odd.

even: true if index is even.

kautuk_sahni
Community Manager
Community Manager
March 7, 2024

@grishmaba Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

Kautuk Sahni
SureshDhulipudi
Community Advisor
Community Advisor
March 7, 2024

https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#226-list

 

<div data-sly-list="${myModel.dummyObj @ begin = 0, end = 1}">

                <a href="${item.pageURL}">${item.pageTitle}</a>

</div>

this should print one first item only as per above begin is included and end is exclude.