Running a Javascript loop inside a bootstrap "row"

Question

I am trying to pull the 12 latest tumblr posts to a website and maintain the bootstrap structure, but I can't figure out how to make the loop pull different photos for each of the span4's. Right now it is pulling 12 rows, each photo is repeated 3 times, I would like it to be 4 rows of 3 photos where each is different. Can anyone help out here?

function formatPhotoHTML(post) {
    var html = '<div class="container">';
    html += '<div class="row">';
    html += '<div class="span4">';

    for (var i = 0; i < post.photos.length; i++) {
        var photo = post.photos[i] ;
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';
        html += '<div class="span4">';
        var photo = post.photos[i];
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';
        html += '<div class="span4">';
        var photo = post.photos[i];
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';
    }

    html += '</div>';
    html += '</div>';

    return html;
}

function appendPostToPage(post) {
  $('.postspot').append(post);
}

function getPosts() {
    $.getJSON('(TUMBLR_API_KEY)',
    function(r) {
        var posts = r.response.posts;

        for (var i = 0; i < 12; i++) {
            var html = "";

            if (posts[i].type === "text") {
                html = formatTextHTML(posts[i]);
            } else if (posts[i].type === "photo") {
                html = formatPhotoHTML(posts[i]);
            }

        appendPostToPage(html);
    }
});

}


$(document).ready(function() {
  getPosts();
});

Could you provide the HTML structure of the final result you want to achieve? — Ortiga
– Ortiga, Commented Aug 12, 2014 at 21:42
You declare the variable 3 times with every loop. Also you assign the variable the same value 3 times. — Hanlet Escaño
– Hanlet Escaño, Commented Aug 12, 2014 at 21:46
@Andre it would just be 4 rows of bootstrap <div class="row"> with 3 <div class="span4">'s inside each, so a total of 12 photos in a grid — Grady Woodruff
– Grady Woodruff, Commented Aug 12, 2014 at 21:47
@HanletEscaño yea, i don't know how you would declare the variable just once and loop it if you want to have three <div class="span4">'s within each row — Grady Woodruff
– Grady Woodruff, Commented Aug 12, 2014 at 21:48
@HanletEscaño I also tried making the second variables [i + 1] and [i + 2] but it didnt work — Grady Woodruff
– Grady Woodruff, Commented Aug 12, 2014 at 21:50

Ortiga · Accepted Answer · 2014-08-12 22:43:20Z

This will add the div.row" every time three photos.

No cleverness to avoid a inner loop, this code is easier to understand:

function formatPhotoHTML(post) {
    var html = '<div class="container">';

    var photos_per_row = 3;
    for(var row = 0; row < post.photos.length; row += photos_per_row)
    {
        html += '<div class="row">'; // open div.row
        for(var i = row; i < (row + photos_per_row); i++)
        {
            var photo = post.photos[i];
            html += '<div class="span4">'; // open span4
            html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
            html += '</div>'; // close span4
        }
        html += '</div>'; // close div.row
    }

    html += '</div>'; // close div.container
    return html;
}

I made a fiddle. You can check it working.

Ronnie Kumar · Accepted Answer · 2014-08-12 23:02:00Z

2

You are seeing 12 rows and each photo repeated 3 times because you are telling function to do so. so in order to show 4 rows and each photo once, remove repeated code inside your function .

function formatPhotoHTML(post) {
var closeDivNow =3;
var html = '<div class="container">';
    for (var i = 0; i <=post.photos.length; i++) {
    if(i%3 == 0 || i==0 ){
               html += '<div class="row">';
        }
        var photo = post.photos[i] ;
            html += '<div class="span4">';
            html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
            html += '</div>';

        if(i%3 == 0 || i==0 && i == closeDivNow){
                  closeDivNow = closeDivNow + i;
                  html += '</div>';
            }
    }
    html += '</div>';
return html;
}

edited Aug 12, 2014 at 23:02

answered Aug 12, 2014 at 21:48

Ronnie Kumar

6356 silver badges18 bronze badges

12 Comments

Ortiga Over a year ago

This will set 1 row with 12 photos inside. OP wants 4 rows with 3 photos each.

Grady Woodruff Over a year ago

my only question with that is, how do i close the <div class="row"> after every 3rd picture and create a new div class="row"> so that they are in the bootstrap grid?

Hanlet Escaño Over a year ago

@GradyWoodruff you can use the % operator to check if i is divisible by 3.

Tony Over a year ago

You could also fix the width of the container and let bootstrap do its fluid magic.

Ronnie Kumar Over a year ago

@GradyWoodruff like Hanlet Escaño said divide by 3 and check if remainder is 0. I have updated the example. let me know if it works for you.

|

RollYourOwnEd · Accepted Answer · 2014-08-12 22:49:34Z

0

OK so you're pulling 12 posts here:

function getPosts() {
    $.getJSON('(TUMBLR_API_KEY)',
    function(r) {
        var posts = r.response.posts;

        for (var i = 0; i < 12; i++) {
            var html = "";

            if (posts[i].type === "text") {
                html = formatTextHTML(posts[i]);
            } else if (posts[i].type === "photo") {
                html = formatPhotoHTML(posts[i]);
            }

        appendPostToPage(html);
    }
});

}

You could use the modulas operator to work out every time you've looped through three posts like so instead:

var html = '<div class="container">';

for (var i = 0; i < 12; i++) {

        if( (i%3 == 0 ){

           html += '<div class="row">'; // opening row every 3
        } 

        html += '<div class="span4">';
        html += '<div class="individualpost" style="background-image:url(' + photo.original_size.url + '); background-position:center center;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover; height:360px; width:100%;"></div>';
        html += '</div>';

        if( i%3 == 2 ){

           html += '</div>'; // closing row every 3
        } 



}

html += '</div>'; //closing container

Mine's a bit rough but that should work...

edited Aug 12, 2014 at 22:49

answered Aug 12, 2014 at 22:08

RollYourOwnEd

265 bronze badges

1 Comment

Ortiga Over a year ago

This will open and close the div.row in the same iteration of the loop, i.e., <div class="row">[0]</div>[1][2]

Collectives™ on Stack Overflow

Running a Javascript loop inside a bootstrap "row"

3 Answers 3

Comments

12 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

12 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related