CODEWITHSUNDEEP
aemsightlyhtl
stdio.h
stdio.h

Reputation: 126

Sightly (HTL) List iteration

How do I iterate over an arrayList of String values in Sightly?

Using my backend java class I get an ArrayList returned to Sightly. How do I iterate over and display them?

Upvotes: 0

Views: 7802

Answers (3)

rakhi4110
rakhi4110

Reputation: 9281

You can either use data-sly-list or data-sly-repeat to iterate over collections / iterables in HTL. Both of them work the same with the only difference, data-sly-repeat doesn't require a container whereas data-sly-list requires one.

Usage:

Method 1

<ul data-sly-list="${someList}">
    <li>${item}</li>
</ul>

Method 2

<ul>
    <li data-sly-repeat="${someList}">${item}</li>
</ul>

Both of which produces the same output as shown below

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
</ul>

More about the HTL Block Statements can be found here

Upvotes: 3

Keshav Chaurasiya
Keshav Chaurasiya

Reputation: 1

data-sly-list use the container such as Please see the example for the better understanding.

I have below List

test1
test2
test3
test4

<div data-sly-list="${ currentPage.listChildren }">
      ${item.name}
</div>

Output will be generated as –

test1 test2 test3 test4

And when you view the HTML element structure in you debugger then it will be –

<div>
   Test1
   Test2
   Test3
   Test4
<div>

Now use data-sly-repeat–

<div data-sly-repeat="${ currentPage.listChildren }">
      ${item.name}
</div>

Output will be – XHTML

test1
test2
test3
test4

Upvotes: -1

Gilsdav
Gilsdav

Reputation: 1155

Can you try data-sly-list ?

Example:

<ul data-sly-list.myitem="${mylist}" data-sly-unwrap>
  <li>${myitem}</li>
</ul>

Upvotes: 0

Related Questions