JavaScript:在循环中附加来自二维数组的数据

Question

我有一个二维数组，我试图附加它的值。我提供了 2 个代码片段；第一个是我试图用第二个代码片段完成的示例。第一个代码片段我为每个索引手动附加数据。
基本上我试图创建一个看起来像的列表

在线3.2

预约2.9

店铺1.8

这就是为什么在我的第一个代码片段中我做了一个 col-md-7首先是带有标题的索引，然后跟进 col-md-5对于带有小数的索引，如下所示:

htmlOutput += "<div class='col-md-7'>";
htmlOutput += "<p> 1. " + array[0][0] + "</p>";
htmlOutput += "</div>";

htmlOutput += "<div class='col-md-5 '>";
htmlOutput += "<p>" + array[0][1]+ "</p>";
htmlOutput += "</div>";

在我的第二个代码片段中，我试图遍历我的数组并增加数据，但我无法分离数组中的索引，例如我当前的结果是:

<div class='col-md-5'><p>Online,3.2</p></div>
<div class='col-md-5'><p>Appointment,2.9</p></div>
<div class='col-md-5'><p>Store,1.8</p></div>
<div class='col-md-5'><p>Date,4.1</p></div>
<div class='col-md-5'><p>Phone,1.2</p></div>

其中索引 0 和 1 在一个 div 中一起返回。我的预期结果是将这些索引分开并让我的返回是这样的

 <div class='col-md-7'><p>Online</p></div> 
 <div class='col-md-5'><p>3.2</p></div>   // index 0 

<div class='col-md-7'><p>Appointment</p></div> 
 <div class='col-md-5'><p>2.9</p></div>     // index 1 

let htmlOutputArray = ""

const array = [
["Online", 3.2 ], 
["Appointment", 2.9],
["Store", 1.8],
["Date", 4.1],
["Phone", 1.2]
] ;


let htmlOutput = ""

htmlOutput += "<div class='col-md-6'>";

 htmlOutput += "<div class='row'>";

    htmlOutput += "<div class='col-md-7'>";
    htmlOutput += "<p> 1. " + array[0][0] + "</p>";
    htmlOutput += "</div>";

    htmlOutput += "<div class='col-md-5 '>";
    htmlOutput += "<p>" + array[0][1]+ "</p>";
    htmlOutput += "</div>";

    htmlOutput += "<div class='col-md-7'>";
    htmlOutput += "<p> 2. " + array[1][0] + "</p>";
    htmlOutput += "</div>";

    htmlOutput += "<div class='col-md-5'>";
    htmlOutput += "<p>" + array[1][1] + "</p>";
    htmlOutput += "</div>";

    htmlOutput += "<div class='col-md-7'>";
    htmlOutput += "<p> 3. " + array[2][0] + "</p>";
    htmlOutput += "</div>";

    htmlOutput += "<div class='col-md-5'>";
    htmlOutput += "<p>" + array[2][1] + "</p>";
    htmlOutput += "</div>";

    htmlOutput += "<div class='col-md-7'>";
    htmlOutput += "<p> 4. " + array[3][0] + "</p>";
    htmlOutput += "</div>";

    htmlOutput += "<div class='col-md-5'>";
    htmlOutput += "<p>" + array[3][1] + "</p>";
    htmlOutput += "</div>";

    htmlOutput += "<div class='col-md-7'>";
    htmlOutput += "<p> 5. " + array[4][0] + "</p>";
    htmlOutput += "</div>";

    htmlOutput += "<div class='col-md-5'>";
    htmlOutput += "<p>" + array[4][1]+ "</p>";
    htmlOutput += "</div>";

    htmlOutput += "</div>";

    htmlOutput += "</div>";
    
    htmlOutputArray += htmlOutput;    // concat all previously rendered html outputs

$("#appendData").html(htmlOutputArray);

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

<div id='appendData'> </div>

let text = ""

const array = [
["Online", 3.2 ], 
["Appointment", 2.9],
["Store", 1.8],
["Date", 4.1],
["Phone", 1.2]
] ;

for (let i = 0; i < array.length; i++) { 
    
    text += "<div class='col-md-7'>";
    text += "<p>" + array[0][i] + "</p>";
    text += "</div>";

}

console.log(text)

Answer 1

看看下面的片段，你通过了 i索引到数组的第二个维度而不是第一个维度。
我已经切换到 template string语法，因为在这种情况下它更简洁一些。
我也用过 i输出“1.”、“2.”的索引在标题之前。

let text = ""

const array = [
  ["Online", 3.2 ], 
  ["Appointment", 2.9],
  ["Store", 1.8],
  ["Date", 4.1],
  ["Phone", 1.2]
]

for (let i = 0; i < array.length; i++) { 
    text += `<div class='col-md-7'><p>${i + 1}. ${array[i][0]}</p></div>`
    text += `<div class='col-md-5'><p>${array[i][1]}</p></div>`
}

// console.log(text)
document.getElementById('appendData').innerHTML = text

<div id='appendData'></div>