如何在數組中循環遍歷數組？

我試圖用返回的AJAX數據動態創建一系列bootstrap卡。AJAX請求帶回了12個數組（參見屏幕截圖），但是當我嘗試循環遍歷它們并將它們放在卡片上時，只有1個數組放在所有12張卡片上（參見屏幕截圖）

我不確定我的循環有什么問題，但希望有人能幫我。

這是JS代碼（很抱歉卡創建的超長線-任何關于如何縮短的建議將不勝感激）。

下面是一個可復制的示例（實際的數據變量在我的代碼中由AJAX調用填充），下面是JSFiddle：

data = [["The Old Milk Bar", "  144 Dundas Street, Thornbury", "Lorem Ipsum"], ["Little Henri", "  848  High Street, Thornbury", 'Lorem Ipsum'], ["Northern Soul", "  843 High Street, Thornbury", "Lorem Ipsum"]]

window.addEventListener('load', (event) => {
    console.log('page is fully loaded');
    test(data)
    });
    
const test = function(data) {
  console.log(data)
  for (i = 0; i < data.length; i++) {
    var results = JSON.stringify(data).split('"');
    var cafeName = results[1].replace(/[^a-zA-Z0-9éè ]/g, "");
    console.log(cafeName)
    var cafeAddress = results[3].replace(/[^a-zA-Z0-9éè ]/g, "") + "," + results[2].replace(/[^a-zA-Z0-9éè ]/g, "");
    console.log(cafeAddress)
    var cafeDescription = results[5];
    console.log(cafeDescription)
    $(".venue-name").html(cafeName);
    $(".venue-address").html(cafeAddress);
    $(".venue-description").html(cafeDescription);
    $(".share").html('<i class="fas fa-share-alt"></i>');
    $(".venue-options").html('<i class="fas fa-ellipsis-h"></i>');
    var myCol = $('<div id="col"></div>');
    var myPanel = $(
      '<div class="card-group"><div class="card card-block m-3 overflow-auto" style="width: 18rem;"><div class="card-body"><h5 class="card-title venue-name"></h5><h6 class="card-subtitle mb-2 text-muted venue-address"></h6><div class="dropdown"><div class="venue-options" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></div><div class="dropdown-menu" aria-labelledby="dropdownMenuButton"><a id="share" class="dropdown-item" href="#">Share</a><a id="addToList" class="dropdown-item" href="#">Add to List</a></div></div><div class="venue-description"></div></div></div></div>'
    );
    myPanel.appendTo(myCol);
    myCol.appendTo('#cardList');
  };
}