Как динамически создать новую строку после числа столбцов х

Question

У меня есть данные JSON, которые я хочу динамически добавить к table.Я смог сделать именно это, но мне нужна ситуация, когда после четвертого столбца автоматически создается новая строка и столбец, а оставшиеся данные JSON заполняются во вновь созданном столбце.Я понятия не имею, как выполнить эту задачу.

Вот мой код;данные JSON взяты из базы данных

for (var i = 0; i < data.length; i++) {
  var p = data[i];
  var occupied = p.occupied;

  $("#room").append('<td>\n\
   <div class="card cd" style="width: 15rem;">\n\
<img class="card-img-top" src="../images/Executive_Suite.jpg" alt="HOTEL D RIO">\n\
<div class="card-body r1" style="background-color: green">\n\
<h6 class="card-title name"><span>' + p.category + '</span><br/><span>' + p.position + '</span></h6> \n\
<p class="card-text price" style="color: #fff; font-size: 13px"><span>#' + p.unitprice + ' per 24hrs</span></p> \n\
<a type="button" class="btn btn-dark btn-sm cbody cbody0" style="color: #fff;"><i class="fa fa-plus"></i>Book Now</a>\n\
</div></div></td>');
}

Answer 1

Бритва Оккама - просто используйте переменную, чтобы отслеживать, где вы находитесь. Возможно, мой код не создает желаемый HTML, но я верю, что вы поняли ...?

    rowcnt = 0;
    for (var i = 0; i < data.length; i++) {
        var out = '';
        var p = data[i];
        var occupied = p.occupied; 
        rowcnt++;
        if (rowcnt > 4){
            out += '</tr><tr>';
            rowcnt = 0;
        }else{
            out += '<td>\
                <div class="card cd" style="width: 15rem;">\
                    <img class="card-img-top" src="../images/Executive_Suite.jpg" alt="HOTEL D RIO">\
                    <div class="card-body r1" style="background-color: green">\
                        <h6 class="card-title name"><span>'+p.category+'</span><br/><span>'+p.position+'</span></h6>\
                        <p class="card-text price" style="color: #fff; font-size: 13px"><span>#'+p.unitprice+' per 24hrs</span></p>\
                        <a type="button" class="btn btn-dark btn-sm cbody cbody0" style="color: #fff;"><i class="fa fa-plus"></i>Book Now</a>\
                    </div>\
                </div>\
            </td>';
        }
        $("#room").append(out);
    }