How can I add a wrapper on every two items in mustache loop?

Question

I am trying to get this outcome when looping through json in mustache

<div class="group">
    <article></article>
    <article></article>
</div>
<div class="group">
    <article></article>
    <article></article>
</div>

This is the only thing I know how to do

{{# books }}
    <article> ... </article>
{{/ books }}

ps - I'm using pattern lab

Is it possible to change your array so that it's a 2d array ? This way you wil l have and array of arrays of 2 elements. — O_Z, Oct 29 '16 at 21:30
@O_Z well yes but I wandered it there was a way to do it this way. — relidon, Oct 29 '16 at 21:50

score 0 · Accepted Answer · answered Oct 31 '16 at 17:01

Maintainer of Pattern Lab Node here.

My suggestion is similar to O_Z's comment in that changing the data to utilize listitems.json might be a better bet.

You can read it all here: http://patternlab.io/docs/data-listitems.html

If you really want paired items like that, the gist would be having a template then like this:

{{# listItems.three}}
<div class="group">
    <article>...</article>
    <article>...</article>
</div>
{{/ listItems.three}}

where your listitems.json would correspond as:

{
  "1": {
    "articles" : [
       {...},
       {...}
    ]
  },
  "2": {
    "articles" : [
       {...},
       {...}
    ]
  },
  "3": {
    "articles" : [
       {...},
       {...}
    ]
  }
}

listitems.three has no link to the number of outputted articles, just the potential pook of data. With this approach, the order of itemization is actually randomized each build too.

How can I add a wrapper on every two items in mustache loop?

1 Answers1