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.

Edit:
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?

You're right, I've added code.

Omar Ruder
– Omar Ruder

2020-02-26 07:58:01 +00:00
Commented Feb 26, 2020 at 7:58 — Omar Ruder
– Omar Ruder, Commented Feb 26, 2020 at 7:58

Wimanicesir · Accepted Answer · 2020-02-26 08:36:54Z

2

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>

edited Feb 26, 2020 at 8:36

answered Feb 26, 2020 at 8:10

Wimanicesir

5,1592 gold badges14 silver badges34 bronze badges

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

2 Comments

Wimanicesir Over a year ago

I was too late and didn't know you used Bootstrap

Omar Ruder Over a year ago

No this does exactly what I need it to do, thank you very much!

Abdelrahman Gobarah · Accepted Answer · 2020-02-26 08:05:44Z

1

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>

answered Feb 26, 2020 at 8:05

Abdelrahman Gobarah

1,5892 gold badges13 silver badges30 bronze badges

2 Comments

Omar Ruder Over a year ago

This works, thank you. However, I don't want every item to be col-3. If a row contains only 1 item, I would like it to be regular col (col-12), if it would contain 2 items I would like it to be col-6. That's why I used col, this automatically fils a row with the amount of columns it has (up to 12)

Abdelrahman Gobarah Over a year ago

Welcome, in your code you use col only that will be one row with all columns

Collectives™ on Stack Overflow

Display rows and columns based on javascript array data

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related