在Pug中迭代一个数组

时间:2017-05-12 09:53:57

标签: javascript node.js express pug

我正在以JSON格式从外部API检索数据并将该数据发送到我的视图。我遇到的问题是,Object中的一个属性是一个对象数组。在Pug文档(Pug Iteration)之后,我可以像这样成功迭代数组:

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

但是,Array存储了20个值,理想情况下,我想一次迭代四个值,这样我就可以实现以下输出:

<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>

修改

JSON结构

{
  "string": "string",
  "string": "string",
  "array": [
    {
      "string": "string",
      "media": {
        "m": "string"
      }
    },
    {
      "string": "string",
      "media": {
        "m": "string"
      }
    }
  ]
}  

1 个答案:

答案 0 :(得分:0)

您可以先将项目分组4,然后使用两个嵌套循环来迭代群组和群组中的项目

proc compare {a b} {
  foreach ai $a bi $b {
    if {$ai < $bi} {
        return -1
    } elseif {$ai > $bi} {
        return 1
    }
  }
  return 0
}
set a { {142 250} {153 99} {142 99}}
lsort -command compare $a
# >> {142 99} {142 250} {153 99}

set b { {142 250 12} {142 99 9} {153 99 1} {142 99 10}}
lsort -command compare $b
# >> {142 99 9} {142 99 10} {142 250 12} {153 99 1}