I have an apps script that dynamically creates content from a Google Sheet, loading content into Bootstrap grid ponents.

While the code does work correctly, I need to cater for multiple rows, explained below.

A simplified version of the code is:

<? for (var i=0 ; i <lastRow; ++i) { ?>
<?if(getNSW[i] != "" && getNSW[i] != "TOTAL") {?>
        <div class="col-md-4">
                <!-- output -->
            </div>
        </div><? }} ?>

What I am aiming to do is for every 3rd col div created, to put them in a new "row" div.

Output would be something like:

<div class="row">
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
</div>
<div class="row">
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
</div>

Obviously I need some sort of for loop to count the cols etc... I am just drawing a blank for the correct syntax.

I have an apps script that dynamically creates content from a Google Sheet, loading content into Bootstrap grid ponents.

While the code does work correctly, I need to cater for multiple rows, explained below.

A simplified version of the code is:

<? for (var i=0 ; i <lastRow; ++i) { ?>
<?if(getNSW[i] != "" && getNSW[i] != "TOTAL") {?>
        <div class="col-md-4">
                <!-- output -->
            </div>
        </div><? }} ?>

What I am aiming to do is for every 3rd col div created, to put them in a new "row" div.

Output would be something like:

<div class="row">
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
</div>
<div class="row">
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
</div>

Obviously I need some sort of for loop to count the cols etc... I am just drawing a blank for the correct syntax.

• javascript
• html
• twitter-bootstrap
• google-apps-script

• use a nested loop where the outside loop creates the row every 3rd time the inside loop runs – RenaissanceProgrammer Commented Jan 24, 2017 at 23:45

3 Answers 3

Try this:

    var output = "<div class='row'>";
    for(var i=0;i<lastRow;i++)
    {
       if((i%3)==0)
       {
          output += "</div><div class='row'>" + "<div class='col-md-4'><!-- content --></div>";
       }
       else
       {
          output += "<div class='col-md-4'><!-- content --></div>";
       }
    }

    if((i%3)!=0)
    {
       output += "</div><div class='row'>";
    }

What the above code does is, every 3rd iteration it inserts

</div><div class="row">

which terminated the previous div tag and starts a new row.

PS. You'll need to add the logic for the content to be displayed.

Use nested loops

<?php
    for($i=0;$i<rows;$i++){
        echo '<div class = "row">'
        for($j=0;$j<3;$j++){
            if(getNSW[i] != "" && getNSW[i] != "TOTAL"){
?>
                <div class="col-md-4"><!--content--></div>
<?php
            }
        }
        echo '</div>'
    }
?>

Using Django template you could easily do it like this:

<div class="row">

    {% for item in items %}
    <div class="col-md-3">{{ item }}</div>

        <!-- if last column in row -->
        {% if forloop.counter|divisibleby:"4" and not forloop.last %}
        </div><div class="row">
        {% endif %}

    {% endfor %}

</div>