How to iterate / loop through Jelly

[MarkyMark1]

Hello ---

So basically I have a UI MACRO that receives an integer from the calling UI PAGE.   I am then wanting to dynamically create a new TR row in my UI MACRO with ID="task1",id=task2, and so on until I reach the number I had passed in.  If the passed in value was 10 then I have and tr rows created with id's like id="task", id="task2", id="task3"... all the way to id=".task10".

In trying to learn how to do this I first got it working with an array of colors.... 

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

        <g:evaluate>

                var colors = ['Red', 'Black', 'Blue', 'Brown', 'CadetBlue', 'DarkGreen', 'DeepPink'];

        </g:evaluate>   

        <table style="width:100% height:100%">    

     <j:forEach var="jvar_colors" items="${colors}">     

         <tr id="task${jvar_colors}"><td>TASK COLOR: ${jvar_colors} </td> </tr>

     </j:forEach> 
        </table>

       

</j:jelly>

The forEach loop processes the array and dynamically created the TR rows with the id's equal to task with the appended color.  Here's a code of the resulting HTML.

 

So now I'm hung up on how to do this with my passed in an integer?  How can I iterate from 1 to the passed in value?

FYI here's the bit of code that is retrieving my integer from the ui page.   For instance, if the value 5 was passed in myValue does reflect this.

<script>
var myValue = ${jvar_num_sel} //valued passed in grom invoke macro call in ui page.
alert("myValue: " + myValue);
</script>

Should I use a forEach and iterate from 1 to X (passed in value).  If yes, how?   I've also tried a WHILE and couldn't figure that syntax other either.   So how do I modify the below to loop from 1 to X?   In javascript, the creating a loop I need is straight forward.  For me converting it into Jelly is causing me headaches.

<j:forEach var="jvar_colors" items="${colors}"> 

<tr id="task${jvar_colors}"><td>Number Used: ${jvar_colors} </td> 
</tr>
</j:forEach>

Any suggestions would be greatly appreciated. 

[Manish Vinayak1 · Accepted solution]

Hi Mark,

You can add begin and end attributes to your j:forEach tag, to specify the starting index and the end index for your loop. Here is how it can be done:

<j:forEach begin="your starting index INT" end ="your ending index INT" var="jvar_variable" items="${array}">

I tried the following:

<?xml version="1.0" encoding="utf-8" ?>

<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

        <g:evaluate>

                var colors = ['Red', 'Black', 'Blue', 'Brown', 'CadetBlue', 'DarkGreen', 'DeepPink'];

        </g:evaluate>   

			Looping through first 2 values:
	
      <table style="width:100% height:100%">    

     <j:forEach begin="0" end="2" var="jvar_colors" items="${colors}">     

         <tr id="task${jvar_colors}"><td>TASK COLOR: ${jvar_colors} </td> </tr>

     </j:forEach> 
        </table>
       

</j:jelly>

Here is the result:

Hope this helps!

Cheers,

Manish