How to render array into specific form for mustache to render

Question

I get an array of objects with image locations via API and I can't manage to render it.

I managed to get my array into chuncks of 4 using underscore, but I can't get my head around how to massage my data into correct form so I could render it out through mustache.

The code currently looks like this:

var template = "<ul>{{#images}}<li>{{location}}</li>{{/images}}</ul>";

var data = [
    {"location":"gallery\/Baar_Toit_5.jpg"},
    {"location":"gallery\/Baar_Toit_7.jpg"},
    {"location":"gallery\/Baar_Toit_8.jpg"},
    {"location":"gallery\/Baar_Int_1.jpg"},
    {"location":"gallery\/Baar_Int_2.jpg"},
    {"location":"gallery\/Baar_Int_3.jpg"},
    {"location":"gallery\/Baar_Int_4.jpg"},
    {"location":"gallery\/Baar_Uus_01.jpg"},
    {"location":"gallery\/Baar_Uus_02.jpg"},
    {"location":"gallery\/Baar_Uus_03.jpg"},
    {"location":"gallery\/Baar_Uus_04.jpg"},
    {"location":"gallery\/Baar_Uus_05.jpg"},
    {"location":"gallery\/Baar_Uus_06.jpg"},
    {"location":"gallery\/Baar_Uus_07.jpg"}
];

var n = 4;
var imgs = _.groupBy(data, function(element, index){
    return Math.floor(index/n);
});

console.log(imgs);

Mustache.parse(template);
var rendered = Mustache.render(template, { imgs: JSON.parse(imgs) });
$('#gallery').html(rendered);

I created a small sandbox for testing purposes, feel free to play around with it: http://jsfiddle.net/qK5NT/149/

My desired output is:

<ul>
    <li>
        <p>img/1.jpg</p>
        <p>img/2.jpg</p>
        <p>img/3.jpg</p>
        <p>img/4.jpg</p>
    </li>
    <li>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
    </li>
    <li>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
    </li>
    <li>
        <p>img/5.jpg</p>
        <p>img/6.jpg</p>
    </li>
</ul>

Any help will be appreciated!

Answer 1

groupBy isn't the right tool for this job, objects aren't ordered in JavaScript so there's no guarantee that you'll get your chunks in the right order. Yes, this means that the canonical answer for chunking is wrong.

So your first problem is to properly chunk the data. If you're using lodash, you could use its _.chunk. If you're using plain Underscore, you could mixin your own _.chunk and the lodash version can be easily adapted:

_.mixin({
    chunk: function(a, n) {
        // Based on lodash's
        var i = 0, length = a.length, ri = -1;
        var result = Array(Math.ceil(length / n));
        while(i < length)
            result[++ri] = a.slice(i, i += n);
        return result;
    }
});

Now you can chunk your data into fours and get an array-of-arrays out with everything in the right order:

var chunks = _(data).chunk(4);

Then you want to hand the chunks to your template:

var rendered = Mustache.render(template, {
    chunks: chunks
});

And finally, your template needs to iterate over the chunks to produce the <li>s and then iterate over each chunk to produce the <p>s inside the <li>s. That would look like this:

<ul>
    {{#chunks}}
        <li>
            {{#.}}
                <p>{{location}}</p>
            {{/.}}
        </li>
    {{/chunks}}
</ul>

Demo: http://jsfiddle.net/ambiguous/b2te16pj/