1

I'm trying to use the following code in order to split Json array into 3-columns Bootstrap rows I'm trying that by increasing a numeric variable to 3, adding a new row div and set it back to 1.

actually, the variable return as "NaN" at the first attemt to increase it

please your help, or any other idea to splir json to 3-col rows.

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>

Thanks

Itzik Tzadaka
  • 17
  • 2

1 Answers1

0

try replace 

if (coli==3) {
    html += '</div>';
    var coli=1;
    console.log( "1!" );
}

with 

if (coli==3) {
    html += '</div>';
    coli=1;
    console.log( "1!" );
}

You are declaring your variable coli new in the if-statement. That is what you should not do.

Torben
  • 438
  • 1
  • 7
  • 22
  • Your'e right! Did it while trying to fix it. Just removed the "var" and it starts working. also I had to set 1 as the initial variable and 0 and the resetting at the and of the loop. – Itzik Tzadaka Apr 21 '17 at 07:15