Generate Bootstrap card deck with set row length from array

Here's a little script I wrote to help me generate a card deck from an array. You can set the amount of cards per row.
This is currently very crude, the next step would be to make the function accept parameters. I'm adding it on the blog as it might help someone out and for me to recall later.

$.get("bike/all", function(bikes) {
    var deck_cards = 4;
    var card_count = deck_cards;
    var deck_id = 0;
    var card_amount = bikes.length - 1;
    $.each(bikes, function(i, bike) {
        if (card_count >= deck_cards) {
            card_count = 0;
            deck_id++;
            $("#bikeData").append("<div class='card-deck-wrapper'>" + "<div class='card-deck' id='deck" + deck_id + "'></div></div>")
        }
        $("#deck" + deck_id).append("<div class='card' id =" + bike._id + ">" + "<img class='card-img-top img-fluid' src='" + bike.header_image_id + "' alt='Card image cap'>" + "<div class='card-block'>" + "<h5 class='card-title'>" + bike.manufacturer + "</h5>" + "<span class='tag tag-primary'>" + bike.price + " €</span>" + "<p class='card-text'></p>" + bike.description + "<p class='card-text'><small class='text-muted'>updated on: " + bike.updatedAt + "</small></p>" + "</div></div>")
        card_count++;
    })
    while (card_count < deck_cards) {
        $("#deck" + deck_id).append("<div class='card hidden'></div>")
        card_count++;
    }
});

Sandro

So many projects to make! I Enjoy building electronics, especially radios. I also like web development, playing with hardware like the Raspberry Pi and spending time outdoors. Love combining it all!

Finland
comments powered by Disqus