can’t for loop in ejs

Im trying to loop in ejs template, but unexpectedly keep getting these error

In normal javascript

var three = 3;

for(var i = 0; i < 10; i+= 3) {
    console.log("i is " + i);
    for (var j = i; j < three; j++) {
        console.log("j is " + j);
    }
    three += 3;
}

In javascript it works just fine.

The problem is in ejs, I have two versions that I tried, both of them are not working

First Attempt

<% var three = 3;
    for(var i=0; i < jobs.length; i+=3)  { %>

    <div class="row stylish-panel">

      <% for (var j = i; j < three; j++) { %>

      <div class="col-md-4">
      <h4><%= jobs[j].title %></h4>

        <div>
          <img src="http://lorempixel.com/200/200/abstract/1/" alt="Texto Alternativo" class="img-circle img-thumbnail">
        </div>
      </div>
      <% } three += 3;%>
      </div>
    <% } %>

Second attempt

<% for(var i=0, three=3; i < jobs.length; i+=3, three+=3)  { %>

    <div class="row stylish-panel">

      <% for (var j = i; j < three; j++) { %>

      <div class="col-md-4">
        <h4><%= jobs[j].title %></h4>
        <div>
          <img src="http://lorempixel.com/200/200/abstract/1/" alt="Texto Alternativo" class="img-circle img-thumbnail">
        </div>
      </div>
      <% } %>
      </div>
    <% } %>

It keeps telling that Cannot read property 'title' of undefined, but if I change j < three to j < 10, it works just fine

Answer

In your original code, j also goes out of it’s bounds of 10. In the last 4 lines of your output, you get:

i is 9
j is 9
j is 10
j is 11

The last 2 lines is where the problem is. This can be easily solved in your original, or ‘normal’ code as you name it:

var three = 3;

for (var i = 0; i < 10; i += 3) {
    console.log("i is " + i);
    for (var j = i; j < three && j < 10; j++) {
        console.log("j is " + j);
    }
    three += 3;
}

Note that I have added && j < 10. Reworking that in a second attempt, becomes:

for (var i = 0, three = 3; i < 10; i += 3, three += 3) {
    console.log("i is " + i);
    for (var j = i; j < three && j < 10; j++) {
        console.log("j is " + j);
    }
}

But then further examination shows that variable three is not even needed, and you can just use this:

for (var i = 0; i < 10; i += 3) {
    console.log("i is " + i);
    for (var j = i; j < i + 3 && j < 10; j++) {
        console.log("j is " + j);
    }
}

Still works the same. And then attempting to work that back into your final code:

<% for (var i = 0; i < jobs.length; i += 3)  { %>
  <div class="row stylish-panel">
  <% for (var j = i; j < i + 3 && j < jobs.length; j++) { %>
    <div class="col-md-4">
      <h4><%= jobs[j].title %></h4>
      <div>
        <img
          src="http://lorempixel.com/200/200/abstract/1/"
          alt="Texto Alternativo"
          class="img-circle ing-thumbnail"
          />
      </div>
    </div>
  <% } %>
  </div>
<% } %>

So apparently you have a solution to arrange things in columns of 3 fitting whatever number of rows are needed.