How to use an integer value in sightly to iterate loop as many time of value?

[ArpitBora]

Hi All,

I want to iterate a loop based on Integer value like if integer value is 5 then loop will iterate 5 times.
I know a way to do this using JSTL in jsp page :

<c:forEach var="item" begin="1" end="${properties.value}" varStatus="loop"> //statement </c:forEach>

above in "end" im getting value from dialog, if i'm passing value like 5 then the loop will get execute 5 times.

I want to do this using sightly based on passed integer value in html page.

Please provide a solution which is not based on sightly list.

Thanks,

Arpit Bora

[kautuk_sahni]

Loop with fixed number of items

<ul data-sly-list="${ [1,2,3,4] }">
<li>${item}</li>
</ul>

Thanks and Regards

Kautuk Sahni

[ArpitBora]

kautuksahni wrote...

Loop with fixed number of items

<ul data-sly-list="${ [1,2,3,4] }">
<li>${item}</li>
</ul>

Thanks and Regards

Kautuk Sahni

Thanks for suggestion @Kautuk,

I know this scenario it is useful when we have list/array.

But i want to iterate loop based on single integer number like a simple for loop,

for(int i = 0; i<=5; i++){ //statement }

and like a JSTL <c:forEach> loop, as i mentioned in my question.

[Gdubz-57m2mu]

I don't think you can just do arbitrary number loops, it has to be over an array of SOMETHING. If you really need to, you can specify within the loop to do certain things if the index of that loop is greater than or less than a specific value.

Check out the full List spec here (https://github.com/Adobe-Marketing-Cloud/htl-spec/blob/master/SPECIFICATION.md#226-list), and maybe take look at Repeat as well here (https://github.com/Adobe-Marketing-Cloud/htl-spec/blob/master/SPECIFICATION.md#227-repeat).

CptBartender and Nate Yolles have posted some good answers about this on StackOverflow too, here: http://stackoverflow.com/a/37348536/1416091 Basically, the idea is to separate the logic from the templating system, so if you can, handle any sort of filtering before you even pass the object to the HTL component.

I hope that helps, I know it probably isn't the answer you're looking for though.

[Feike_Visser1]

What I can think of that you use a Java/JS implementation, whereby you pass the numeric value.

Then the Java/JS returns an array/list with the correct size, that you can use with data-sly-list/data-sly-repeat

Hope this helps.

[ArpitBora · Accepted solution]

Feike Visser wrote...

What I can think of that you use a Java/JS implementation, whereby you pass the numeric value.

Then the Java/JS returns an array/list with the correct size, that you can use with data-sly-list/data-sly-repeat

Hope this helps.

Thanks @Feike for the suggestion it's really helpful :),
I used "Javascript Use API" implementation to achieve this...

In my .js file after getting the dialog integer value, i'm creating an array based on the value.
Following is the code of my "itemCount.js" file :

"use strict"; use(function () { var count = {}, properties = granite.resource.properties; count = properties["loopCountValue"]; if(count == "2"){ count = [1,2]; } if(count == "3"){ count = [1,2,3]; } if(count == "4"){ count = [1,2,3,4]; } if(count == "5"){ count = [1,2,3,4,5]; } return count; });

Now in my .html file, using Sightly List (data-sly-list) i'm rendering data into UI successfully.
Following is the code of my "testCount.html" file :

<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}" /> <sly data-sly-use.itemCount="itemCount.js" data-sly-unwrap /> <sly data-sly-test="${!itemCount}"> <div> <h2>Iterate a sightly loop based on Integer value passed from dialog.</h2> </div> </sly> <sly data-sly-test="${itemCount}"> <p>Test Count ${itemCount}</p> <ul data-sly-list="${itemCount}"> <li>ITEMS : ${item}</li> </ul> </sly>

[Feike_Visser1]

I got your JS-code down to this:

"use strict";
use(function () {
    var count = properties["columCount"];

    return new Array(Number(count));

});