jquery split an array into groups of 4

Question

I have a script that currently gets the data for a bootstrap carousel via a json file and ajax a. it works fine and has been working for a while. The issue I am having is that I am now trying to work out a new carousel display that shows the individual slides as thumbnails in groups of four rather than individual slides. I am not sure of the correct logic to split an array into groups of 4 in an each loop. Any suggestions would be appreciated. Below is my current JQUERY script to get the data for the slides, and the HTML for the new layout.

JQUERY

$(document).ready(function(){
    $.getJSON("/property/slideshow_json", function(data){
    }).success(function(data){
        $.each(data, function (index, value) {
            $(".carousel-indicators").append($( '<li data-target="#myCarousel" data-slide-to="' +index+ '">'+ (index+1) +'</li>' ));
            $(".carousel-inner").append($('<div class="item"><img src="/property/photo/'+value.mls_number+'/1"><div class="carousel-caption"><h4>PRICED TO SELL | $'+value.price+'</h4><p style="text-transform:uppercase;">'+value.address+' <a href="/property/detail/'+value.mls_number+'"class="btn btn-small btn-info pull-right">View Details</a></p></div></div>'));
        });
        $('.carousel-indicators li:first').addClass('active');
        $('.carousel-inner div:first').addClass('active');
        $('#myCarousel').carousel({interval: 4000});    
    });
});

Example of how the above script needs to output.

<div class="span12">
    <h2>Featured Listings</h2>
    <div id="featured" class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#featured" data-slide-to="0" class="active"></li>
            <li data-target="#featured" data-slide-to="1"></li>
            <li data-target="#featured" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <div class="row-fluid">
                  <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                  <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                  <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                  <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                </div>
            </div>
            <div class="item">
                <div class="row-fluid">
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                    <div class="span3"><a href="#x" ><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div>
                </div>
            </div>
        </div>
        <a class="carousel-control left" href="#featured" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#featured" data-slide="next">&rsaquo;</a>
    </div>
</div>

assuming i would i would use .slice(), count the number of items in the array and chunk the array with a while loop and counter? am i ate least on the right track? — TEN Design, Oct 25 '14 at 21:33
You may want to read: http://stackoverflow.com/questions/7273668/split-a-long-array-into-smaller-arrays-with-jquery, http://stackoverflow.com/questions/8495687/split-array-into-chunks — David Thomas, Oct 25 '14 at 23:15

Luís Cruz · Accepted Answer · 2014-10-25T23:01:28.567

Either you fetch the data from the server in a different manner of you'll have to manipulate it with jQuery. Personally, I would do that in the server side and receive a json with the correct format.

However, there are many ways to do that with jQuery, this is one:

var counter = 0, 
    indicators = 0, 
    items = '<div class="item active"><div class="row-fluid">';
$.each(data, function (index, value) {
    switch(counter) {
        case 4: $(".carousel-indicators").append($( '<li data-target="#featured" data-slide-to="' +indicators+ '"></li>' ));
            $(".carousel-inner").append(items + '</div></div>');
            // increment indicators
            indicators++;  
            // "reset" items
            items = '<div class="item active"><div class="row-fluid">';
            break;
        default:
            // you might need something more here. 
            // I didn't saw in your html sample value.address and value.mls_number
            items += '<div class="span3"><a href="#x" ><img src="/property/photo/'+value.mls_number+'/1" alt="Image" style="max-width:100%;" /></a></div>';
    }
   counter++;
});

jquery split an array into groups of 4

1 Answers1