Javascript 如何在数组中循环遍历数组？

我试图用返回的AJAX数据动态创建一系列引导卡。AJAX请求返回12个数组（请参阅），但当我尝试循环遍历它们并将它们放在卡上时，只有1个数组放在所有12张卡上（请参阅）

我不确定我的循环出了什么问题，但希望有人能帮忙

这是JS代码（很抱歉为卡片制作排了很长的队-如果您有任何关于如何缩短的建议，我们将不胜感激）

下面是一个可复制的示例（实际数据变量由我的代码中的AJAX调用填充），下面是：

data=[[“旧牛奶酒吧”、“桑伯里邓达斯街144号”、“洛伦·伊普苏姆”]、[“小亨利”、“桑伯里高街848号”、“洛伦·伊普苏姆”]、[“北魂”、“桑伯里高街843号”、“洛伦·伊普苏姆”]]
window.addEventListener（'load'，（事件）=>{
log（“页面已完全加载”）；
测试（数据）
});
常数测试=功能（数据）{
console.log（数据）
对于（i=0；i

您不需要调用

JSON.stringify（）

和

split（）

。您已经有了一个数组，可以直接访问它的元素

当您执行

$（“.vention name”）.html（cafeName）

时，您设置的是该类中所有元素的html，而不是您正在创建的卡。事实上，它设置了除新卡之外的所有元素，因为只有在这些行之后才添加这些元素

相反，首先创建

myPanel

，然后设置该DIV中元素的HTML。您可以使用

myPanel.find（“.className”）

或等效的

$（“.className”，myPanel）

来完成此操作

数据=[
[“旧牛奶酒吧”、“桑伯里邓达斯街144号”、“洛雷姆·伊普苏姆”]，
[《小亨利》，《桑伯里大街848号》，《洛雷姆·伊普苏姆》]，
[“北方之魂”、“桑伯里高街843号”、“Lorem Ipsum”]
]
window.addEventListener（'load'，（事件）=>{
log（“页面已完全加载”）；
测试（数据）
});
常数测试=功能（数据）{
console.log（数据）
data.forEach（[cafeName，cafeAddress，cafeDescription]）=>{
变量myCol=$（''）；
var myPanel=$(
`
`
);
$（“.vention name”，myPanel）.html（cafeName）；
$（“.vention address”，myPanel）.html（cafeadress）；
$（“场地说明”，myPanel）.html（CAFEDEDescription）；
$（“.share”，myPanel）.html（“”，myPanel）；
$（“.vention options”，myPanel）.html（“”）；
myPanel.appendTo（myCol）；
真菌附属物（“#卡片列表”）；
});
}

你让事情变得比实际需要困难得多。只需使用

var cafeName=data[i][0]

你注意到你从来没有在循环中的任何地方使用过

i

吗？如果你不使用迭代变量，循环的意义是什么？嗨，谢谢你的回答。出于某种原因，使用

i

没有得到结果。我在小提琴中尝试了你的建议，对重复项也有同样的问题。谢谢你，这样做了我知道这不是OP，但你有没有建议如何让

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