如何在 arrays 内循环通过 arrays？

Question

我正在尝试使用返回的 AJAX 数据动态创建一系列引导卡。 AJAX 请求带回 12 arrays （见截图）但是当我尝试循环它们并将它们放在卡片上时，只有 1 个数组被放在所有十二张卡片上（见截图）

我不确定我的循环做错了什么，但希望有人能帮忙。

这是 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');
  };
}

Answer 1

您不需要调用JSON.stringify()和split() 。 你已经有了一个数组，你可以直接访问它的元素。

当您执行$(".venue-name").html(cafeName)时，您正在使用该 class 设置所有元素的 HTML，而不是您正在创建的卡。 事实上，它会设置除新的之外的所有内容，因为您要在这些行之后才添加它。

相反，首先创建myPanel ，然后设置该 DIV 中元素的 HTML。 您可以使用myPanel.find(".className")或等效$(".className", myPanel)来执行此操作。

 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) data.forEach(([cafeName, cafeAddress, cafeDescription]) => { 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>` ); $(".venue-name", myPanel).html(cafeName); $(".venue-address", myPanel).html(cafeAddress); $(".venue-description", myPanel).html(cafeDescription); $(".share", myPanel).html('<i class="fas fa-share-alt"></i>', myPanel); $(".venue-options", myPanel).html('<i class="fas fa-ellipsis-h"></i>'); myPanel.appendTo(myCol); myCol.appendTo('#cardList'); }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="cardList"></div>