I have a foreach loop and I need to wrap a div with className='row' around the output of the data every 2 loops.

this is my loop

function getUsers(){
usersjson.users.forEach(function (user,counter) {
//create a DOM element
var div = document.createElement('div');
//add class row every 2 loops
div.className = 'row';
//names
var names = "<p>" + user.first_name +' '+user.last_name+"</p>";
//append to html
div.innerHTML = names;
$('.users_list').append(div);
});
}

This is how it should look like

<div class="row">
<p>John Doe</p>
<p>Jane Doe</p>
</div>

<div class="row">
<p>Marcy Doe</p>
<p>Alfred Doe</p>
</div>

<div class="row">
<p>Judy Doe</p>
<p>Lana Doe</p>
</div>

//...etc

I have a foreach loop and I need to wrap a div with className='row' around the output of the data every 2 loops.

this is my loop

function getUsers(){
usersjson.users.forEach(function (user,counter) {
//create a DOM element
var div = document.createElement('div');
//add class row every 2 loops
div.className = 'row';
//names
var names = "<p>" + user.first_name +' '+user.last_name+"</p>";
//append to html
div.innerHTML = names;
$('.users_list').append(div);
});
}

This is how it should look like

<div class="row">
<p>John Doe</p>
<p>Jane Doe</p>
</div>

<div class="row">
<p>Marcy Doe</p>
<p>Alfred Doe</p>
</div>

<div class="row">
<p>Judy Doe</p>
<p>Lana Doe</p>
</div>

//...etc

• javascript
• html
• foreach

3 Answers 3

Can you try this:

function getUsers(){

    let names = ""
    usersjson.users.forEach(function (user,counter) {

        names = names + "<p>" + user.first_name +' '+user.last_name+"</p>";
        if(counter % 2  == 0) {
            $('.users_list').append(`<div class="row">${names}</div>`);
            names = ""
        } 

    });
}

Your function could do something like this:

function getUsers() {
    for (let i = 0; i < usersjson.users.length; i += 2) {
        //create a DOM element
        var div = document.createElement('div');
        //add class row every 2 loops
        div.className = 'row';
        //names
        var names = `<p>${usersjson.users[i].first_name} ${usersjson.users[i].last_name}</p>`;
        if (usersjson.users[i + 1]) {
            names += `<p>${usersjson.users[i + 1].first_name} ${usersjson.users[i + 1].last_name}</p>`
        }
        //append to html
        div.innerHTML = names;
        $('.users_list').append(div);
    }
}

The current answers may have problems if the elements in the data don't divide nicely by the number of elements in the row.

By using a DocumentFragment, we can update the DOM only once and by creating and appending elements we can do this without having to worry about opening and closing tags for data that doesn't divide evenly by the number of row elements.

function getUsers(usersPerRow){
    let fragment = new DocumentFragment();
    let names = "";
    /*Dummy Data*/
    users = [
      {first_name : "Fist", last_name : "User"},
      {first_name : "Second", last_name : "User"},
      {first_name : "Third", last_name : "User"},
      {first_name : "Fourth", last_name : "User"},
      {first_name : "Fifth", last_name : "User"},
    ];
    let row;
    /*usersjson.*/users.forEach(function (user,counter) {
        /*Check if first iteration or if the row is full*/
        if(counter === 0 || row.querySelectorAll("p").length == usersPerRow) {
          /*Create new row and class*/
          row = document.createElement("div");
          row.classList.add("row");
          /*Append the row to the fragment*/
          fragment.appendChild(row);
        }
        
        /*Update the content of row*/
        row.innerHTML += `<p>${user.first_name} ${user.last_name}</p>`;
    });
    document.getElementById("container").appendChild(fragment)
}

getUsers(2);
getUsers(3);

.row p {display:inline-block; padding-right: 10px;}

<div id="container">
</div>