I'm attempting to split a JSON array into three-column Bootstrap rows using the code below. My approach involves increasing a numeric variable to 3, adding a new row div, and then setting it back to 1.
However, I am encountering an issue where the variable returns as "NaN" when I try to increase it for the first time.
I would greatly appreciate your assistance or any alternative ideas for splitting the JSON into 3-column rows.
Here is the code:
<script>
$( document ).ready(function() {
var coli;
console.log( 'ready!'+coli );
$.getJSON("games.json", function(data) {
var html = '';
var coli=1;
$.each(data, function(key,value){
if (coli==3) {
html += '<div class="row">';
console.log( "3!" );
}
html += '<div class="col-md-4 img-portfolio">';
html += '<a href="portfolio-item.html">';
html += '<img class="img-responsive img-hover" src="'+value.teaser+'" alt="">';
html += '</a>';
html += '<h3>';
html += '<a href="portfolio-item.html">'+value.title+'</a>' ;
html += '</h3>';
html += '<p>'+coli+value.description+'</p>';
html += '</div> ';
if (coli==3) {
html += '</div>';
var coli=1;
console.log( "1!" );
}
coli++;
console.log( 'ready!'+coli );
});
$('#yourContainerId').html(html);
});
});
</script>
Thank you