Friday, 12 May 2017

Iterating over an array in Pug

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 (Pug Iteration), I can successfully iterate over the Array like so:

block content
  .row
    each array in data.items
      .col-md-3
        .well
          img(src=`${array.media.m}`)
          h5 #{array.title}
          p by #{array.author}

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:

<div class="row">
  <div class="col-md-3">
    <div class="well">
      <img src="https://localhost/frank_the_pug.jpg">
      <h5>Frank the Pug</h5>
      <p>by MIB</p>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-3">
    <div class="well">
      <img src="https://localhost/frank_the_pug2.jpg">
      <h5>Frank the Pug 2</h5>
      <p>by MIB</p>
    </div>
  </div>
</div>



via Tom25

No comments:

Post a Comment