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

Question

我有一个二维数组，我试图附加它的值。我提供了 2 个代码 sn-ps；第一个是我尝试使用第二个代码 sn-p 完成的示例。第一个代码 sn-p me 为每个索引手动附加数据。

基本上我正在尝试创建一个看起来像的列表

1. 在线3.2
2. 约会 2.9
3. 商店 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>";

---

在我的第二个代码 sn-p 中，我试图循环遍历我的数组并增加数据，但我无法分隔数组中的索引，例如我当前的结果是：

<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

查看下面的 sn-p，您将 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>

Answer 2

i 应该是第一个索引，而不是第二个索引。然后你需要连接[i][0] 和[i][1]，就像在你的扩展代码中一样。

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[i][0] + "</p>";
  text += "</div>";
  text += "<div class='col-md-5 '>";
  text += "<p>" + array[i][1] + "</p>";
  text += "</div>";
}

console.log(text)