Expand my Community achievements bar.

SOLVED

Display single item from a list In sightly

Avatar

Level 1

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.?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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-... 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

View solution in original post

5 Replies

Avatar

Correct answer by
Community Advisor

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-... 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

Avatar

Community Advisor

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.

Avatar

Administrator

@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

Avatar

Community Advisor

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.