Multi tool use

How to get 8 columns per row? [Javascript , Bootstrap]

So i am here wrote this simple function for searching movies and manipulating them in the dom.and the problem here is when a movie name is typed the api response back with at least 20/30 recommendations.And i want the fetched data to be distributed in 8 columns per row.So i wrote this function :

Javascript part :

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 part that im manipulating :

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


But Instead of the desired outcome ,it just repeats one movie 8 times.

And I am trying to get the model to be somewhat like this each row without repeating any movie:

I am a newbie so i might have missed something. Please do help .

1 Answer
1

Your loop should be like the following; you need to close the current row after every 8th item and then open a new row.

row

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>';


See the working example below:

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.