Generating Dynamic Cards HTML cards from a Javascript array and Bootstrap in different rows and Columns

Question

I want to create my Team section with more than one rows and 5 cards in one rows. I want to create the array of all team members and align it in the above-mentioned format. But my problem is I couldn't make card align in a different row when one row is filled by 5 cards.

I did it with manually creating 3 different arrays for 3 rows. But I want to do it using Single Array and Single Loop.

const teamDataOne = [
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
    facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  },
  {
    img: "img/team/man.png",
    name: "Bimal Timilsina",
    position: "Web Designer",
     facebook: "https://facebook.com/",
    email: "mailto:someone@gmail.com"
  }
];

const container = document.getElementById("teamRowOne");

teamDataOne.forEach(result => {
  // Construct card content
  const content = `
    <div class="col-md-2 shadow p-3 mb-5 bg-white rounded ">
        <img src="${result.img}" height="150" width="150" alt="name">
        <h4>${result.name}</h4>
        <h6>${result.position}</h6>
        <div class="border-bottom"></div>
        <a href="${
          result.facebook
        }" target="_blank" class="btn-social btn-facebook"><i class="fa fa-facebook"></i></a>
        <a href="${
          result.email
        }" target="_blank" class="btn-social btn-email"><i class="fa fa-envelope"></i></a>
        </div>
    `;

  // Append newyly created card element to the container
  container.innerHTML += content;
});

Here is my HTML Code:

<div class="row justify-content-around wow zoomIn" id="teamRowOne">
      </div>

I expect to align only five cards in each row.

just chunk the "one" array into bits using modulo or take a look here https://stackoverflow.com/questions/7273668/how-to-split-a-long-array-into-smaller-arrays-with-javascript, then add a row for each chunk — john Smith, Jun 02 '19 at 09:48
Isn't there any way to do it using just one loop and one array? — Bimal Timilsina, Jun 02 '19 at 09:57
yes, make use of the `modulo` operator on the current iteration with 5 and everytime it is 0 you close and start the new row — john Smith, Jun 02 '19 at 10:00

john Smith · Accepted Answer · 2019-06-02T10:24:30.303

There are thousand ways to do it, i just want to example one using the modulo operator. You could do it in one loop like this:

// dont use row as a container anymore, take the parent element
var container = document.getElementById("row-container");
var content="";    
teamData.forEach(function(result,i){
  if(i == 0){
    //add start row 
    content+= '<div class="row">'
  }
  // add content
  content += '<div class="col....'

  if(i!=0 && i%5 == 0){

    // add end of row ,and start new row on every 5 elements
    content += '</div><div class="row">'
  }

});
// after looping dont forget to close the last row 
content += '</div>'
container.innerHTML += content;

(it´s tweakable pseudocode to let you get an idea)

YouBee · Answer 2 · 2019-06-02T10:47:47.807

As you are using bootstrap grid classes row and col, When you are creating the column using col-md-2, the single row will get 6 partitions, so you might be getting 6 cards in one row after adding more than 5 team members in the array.

As there is no class to divide the row in 5 partitions, but in your case you can add a little margin to make it five cards per row. I tried it with m-2 which is margin of 2px.

Add it where you are creating the column inside the loop

<div class="col-md-2 m-2 shadow p-3 mb-5 bg-white rounded ">

Hope it works for you.

Generating Dynamic Cards HTML cards from a Javascript array and Bootstrap in different rows and Columns

2 Answers2