title: Iterating over an array in Pug
body: <p>I'm retrieving data from an external API in JSON format and sending that data to my view. The issue I'm having is, one of the properties within the Object is an Array of Objects. Following the Pug Documentation (<a href="https://pugjs.org/language/iteration.html" rel="nofollow noreferrer">Pug Iteration</a>), I can successfully iterate over the Array like so: </p>
  
  <pre class="lang-js prettyprint-override"><code>block content
    .row
      each item in data.array
        .col-md-3
          .well
            img(src=`${item.media.m}`)
            h5 #{item.title}
            p by #{item.author}
  </code></pre>
  
  <p>However, the Array stores 20 values and ideally, I would like to iterate over four values at a time so I can achieve the following output:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;div class="col-md-3"&gt;
      &lt;div class="well"&gt;
        &lt;img src="https://localhost/frank_the_pug.jpg"&gt;
        &lt;h5&gt;Frank the Pug&lt;/h5&gt;
        &lt;p&gt;by MIB&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-md-3"&gt;
      &lt;div class="well"&gt;
        &lt;img src="https://localhost/frank_the_pug2.jpg"&gt;
        &lt;h5&gt;Frank the Pug 2&lt;/h5&gt;
        &lt;p&gt;by MIB&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>JSON Structure</p>
  
  <pre><code>{
    "string": "string",
    "string": "string",
    "array": [
      {
        "string": "string",
        "media": {
          "m": "string"
        }
      },
      {
        "string": "string",
        "media": {
          "m": "string"
        }
      }
    ]
  }  
  </code></pre>