Как получить 8 столбцов в строке? [Javascript, Bootstrap]

Question

Итак, я здесь написал эту простую функцию для поиска фильмов и манипулирования ими в домене, и проблема здесь в том, что когда название фильма набирается в ответ API, по крайней мере, с 20/30 рекомендациями. И я хочу получить извлеченные данные быть распределенным в 8 столбцах на строку. Итак, я написал эту функцию:

Часть Javascript:

 db.multisearch()
  .then(data=>{
     var div=document.getElementById('call');
     var output='';
for(let i=0;i<data.length;i++){
     var poster=data[i].poster_path;
     var title=data[i].title;

for(let j=0;j<=8;j++){
  output +=`<div class="col-sm">
  <div class="card mb-3">
      <img class="card-img-top" src='https://image.tmdb.org/t/p/w342//${poster}' alt="Card image cap">
      <div class="text-block"><p>${title}</p></div>
    </div>
  </div>`;
  }
 }
div.innerHTML=output;
});

HTML-часть, которой я манипулирую:

<section class="movie-page">
<div class="container">
  <div class="row" id="call"></div>
</div>

Но вместо желаемого результата он просто повторяет один фильм 8 раз.

И я пытаюсь сделать так, чтобы модель была похожа на каждый ряд, не повторяя ни одного фильма:

Я новичок, поэтому я мог что-то пропустить. Пожалуйста, помогите.

Answer 1

Ваш цикл должен выглядеть следующим образом; вам нужно закрыть текущий row после каждого 8-го элемента, а затем открыть новый row.

    var output = '<div class="row">';

    for(let j=1; j<=data.lenght; j++){

        output +=`<div class="col-xs-1">
            content into column
        </div> \n`;

        if(j !== 0 && j%8 === 0) {
            output += '</div><div class="row">';
        }
    }

   output += '</div>';

См. Рабочий пример ниже:

var output = '<div class="row">';

for(let j = 1; j<= 50; j++){


  output +=`<div class="col-xs-1">
		${j}
	</div> \n`;

  if(j !== 0 && j%8 === 0) {
    output += '</div><div class="row">';
  }
}

output += '</div>';

document.getElementById('container').innerHTML = output;

.row {
  margin-bottom: 10px;
  overflow: hidden;
  display: block;
}

.row .col-xs-1 {
  float: left;
  box-sizing: border-box;
  color: red;
  text-align: center;
  display: block;
  margin-bottom: 10px;
  width: 8.33%;
  padding: 10px;
}

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