Display rows and columns based on javascript array data

Question

I was wondering how I could dynamically display columns and rows based on the target amount.

Let me clarify this more clearly. I have a javascript array called groepsCodes .
I want to make a bootstrap column for each of these group codes.

The problem is that I only want four columns per row, so if I have 5 group codes I would like 4 columns in one row and 1 column in the next row.
More ideally would be 3 columns & 2 columns, but that's an issue for later.

I feel like this is the point where my javascript knowledge stops, so if anyone knows what to do, I'd be glad to hear it.

As suggested I should add code.

In my HTML I have these divs that need to be filled:

   <div id="groupCharts">
        <div class="row" id="groupChartsRow">
        </div>
    </div>

In javascript I do that as such:

    groepsCodes = ["test", "test1", "test2", "test3"];
for (i = 0; i < groepsCodes.length; i++) {
    $("#groupChartsRow").append("<div class='col'><div class='chartCard'>Hoi</div></div><br>");
}

Now this works fine. But let's say groepsCodes has 5 items instead of 4.
Now I'd like an extra row div, how could I solve this?

Answer 1

If I understand your problem, you want to add a new row every fourth item.

So instead of append it right away, build your HTML first and then append. You can use % to check if the fourth item has passed.

 var groepsCodes = ["test", "test1", "test2", "test3", "test4", "test5"]; var html = '<div class="row">'; for (i = 0; i < groepsCodes.length; i++) { if (i % 4 == 0 && i != 0) { html += '</div>' html += '<div class="row">' } html += '<div class="col"><div class="chartCard">Hoi</div></div><br>' } $('#result').append(html);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="result"></div>

Answer 2

That's Grid System in Bootstrap can do for you

https://getbootstrap.com/docs/4.0/layout/grid/

when you specify col-3 that' mean 12 / 3 so it will be 4 per row if you're using Bootstrap 4

if you're using Bootstrap 3 use col-xs-3

---

Working Example css for demo only

 let groepsCodes = ["test", "test1", "test2", "test3", "test", "test1", "test2", "test3", "test5", ]; for (i = 0; i < groepsCodes.length; i++) { $("#groupChartsRow").append("<div class='col-3'><div class='chartCard'>Hoi</div></div><br>"); }

 [class^="col"] { border: 1px solid black; padding: 10px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <div id="groupCharts"> <div class="row" id="groupChartsRow"> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>