Dynamically create rows with for loop in Bootstrap / HTML

Question

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

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.

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

Suyash Gandhi · Accepted Answer · 2017-01-25 06:38:06Z

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.

answered Jan 25, 2017 at 6:38

Suyash Gandhi

9467 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ollaw · Accepted Answer · 2017-01-24 23:53:51Z

0

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>'
    }
?>

answered Jan 24, 2017 at 23:53

ollaw

2,2031 gold badge24 silver badges33 bronze badges

Comments

Saidmamad · Accepted Answer · 2020-04-14 18:44:33Z

0

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>

edited Apr 14, 2020 at 18:44

answered Apr 14, 2020 at 16:48

Saidmamad

831 silver badge13 bronze badges

2 Comments

emccracken Over a year ago

I think it would be useful to add that this is some template engine being used, Twig?

Saidmamad Over a year ago

yesm I added Django template as a comment but seems Stack Overflow removed it. Thank you! I will try to edit it again

Collectives™ on Stack Overflow

Dynamically create rows with for loop in Bootstrap / HTML

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related