Javascript JSON 在返回 3 项后插入新行

Question

我正在使用 Google 表格在我的网站上填充与我所属联盟相关的数据。除了一个非常微小的方面之外，一切都运行良好。我一直在网上搜索一种方法来执行此操作，但似乎找不到可以为我提供执行此操作的方法的资源。

我在网站上使用 Bootstrap 4，并使用卡片来显示我的数据。使用Card-Deck功能，我尝试按球队建立一组名单，以便联盟球员可以看到球队中有谁。这按预期工作并构建了单排卡片。不过，我想做的只是连续 3 张牌，因为超过这确实会压缩数据，而且我们的联赛最多有 16 支球队。

这是我的 JavaScript:

// make JSON call to Google Data API
$.getJSON(url, function(data) {

  //Build the Card Group
  var cardstart = '';
  cardstart += '<div class="card-deck">';

  var cardend = '';
  cardend += '</div>';

  //Build the Sunday Juniors Rosters
  var sunjunroster = '';

  //Loop to build the html output for team name
  var entrysunjunroster = data.feed.entry;
  for (var ia = 0; ia < entrysunjunroster.length; ia++) {
    if (entrysunjunroster[ia]['gsx$night']['$t'] == "sunday" && entrysunjunroster[ia]['gsx$format']['$t'] == "juniors") {
      sunjunroster += '<div class="card border border-dark mb-3">';
      sunjunroster += '<h4 class="card-header bg-bcaprimary text-light text-center">' + entrysunjunroster[ia]['gsx$teamname']['$t'] + '</h4>';
      sunjunroster += '<div class="card-body p-0">';
      sunjunroster += '<table class="table table-sm mb-0 tablesorter table-striped"><tbody>';
      if (entrysunjunroster[ia]['gsx$p1']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p1']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p2']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p2']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p3']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p3']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p4']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p4']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p5']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p5']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p6']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p6']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p7']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p7']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p8']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p8']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p9']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p9']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p10']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p10']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p11']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p11']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p12']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p12']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p13']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p13']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p14']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p14']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p15']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p15']['$t'] + '</td></tr>';
      }
      if (entrysunjunroster[ia]['gsx$p16']['$t'] !== '') {
        sunjunroster += '<tr><td class="text-center">' + entrysunjunroster[ia]['gsx$p16']['$t'] + '</td></tr>';
      }
      sunjunroster += '</tbody></table></div></div>';
    }
  }

  // output html - Sunday Juniors	
  $('.sunjunroster').html(cardstart + sunjunroster + cardend);

});

以及在我的页面上构建此内容的 html:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="sunjunroster"></div>
    </div>
  </div>
</div>

我知道使用 PHP，您可以计算查询中返回的项目并插入一行代码，然后继续查询。这就是我想要在这里做的事情。

它会在其中获取计数，并在 3 个项目之后，关闭 col 和 row div，并将它们添加回以开始新行。

所以它会插入这段代码:

</div></div><div class="row"><div class="col">

然后继续从 JSON 数组构建。

Answer 1

使用模运算符%。它返回除法的余数。可被 3 整除的整数的余数始终为 0，因此我们可以利用这一点。

for (var ia = 0; ia < entrysunjunroster.length; ia++) {
   if (ia % 3 == 0 && ia > 0)
   {
        sunjunroster += '</div></div><div class="row"><div class="col">';
   }
   else if (ia == 0) //expection for zero index, nothing to close
   {
        sunjunroster += '<div class="row"><div class="col">';
   }

   //rest of your code...
}