How to use an integer value in sightly to iterate loop as many time of value? | Community
Skip to main content
ArpitBora
ArpitBora
Level 3
September 30, 2016
Solved

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

  • September 30, 2016
  • 6 replies
  • 13277 views

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

    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 ArpitBora

    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>

    6 replies

    kautuk_sahni
    Community Manager
    kautuk_sahniCommunity Manager
    Community Manager
    September 30, 2016

    Loop with fixed number of items

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

    Thanks and Regards

    Kautuk Sahni

    Kautuk Sahni
    ArpitBora
    ArpitBoraAuthor
    Level 3
    September 30, 2016

    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
    Gdubz-57m2mu
    Level 5
    September 30, 2016

    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
    Adobe Employee
    Feike_Visser1Adobe Employee
    Adobe Employee
    September 30, 2016

    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
    ArpitBoraAuthorAccepted solution
    Level 3
    September 30, 2016

    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
      Adobe Employee
      Feike_Visser1Adobe Employee
      Adobe Employee
      October 1, 2016

      I got your JS-code down to this:

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

          return new Array(Number(count));

      });

        Terms & ConditionsAccessibility statement

        Loading footer...