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 \t 
 
    $('.sunjunroster').html(cardstart + sunjunroster + cardend); 
 

 
});

，並建立此我的網頁上的HTML：

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

我知道用PH P可以計算查詢中返回的項目並插入一行代碼，然後繼續查詢。這是我想在這裏做的。

它會在哪裏拿起計數，並在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... 
}