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

Question

I have a 2 dimensional array that I am attempting to append it's values. I have provided 2 code snippets; First one is an example of what I am attempting to accomplish with the second code snippet. The first code snippet me appending data manually for every single index.

Essentially I am attempting to create a list that looks like

1. Online 3.2
2. Appointment 2.9
3. Store 1.8

which is why in my first code snippe I do a col-md-7 first for the index with the title and then follow up with a col-md-5 for the index with the decimal like this:

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>";

---

In my second code snippet, I am attempting to loop through my array and increment the data but I am unable to seperate the indexs in the array for a example my current result is:

<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>

Where index 0 and 1 are being returned together in one div. My expected outcome is to have these indexes separate and have my return be something like this

 <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

Check out the snippet below, you were passing the i index into the second dimension of the array instead of the first.

I've switched to template string syntax because it's a bit more concise in this case.

I've also used the i index to output the "1.", "2." before the titles.

 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 should be the first index, not the second index. Then you need to concatenate [i][0] and [i][1] , just like in your expanded code.

 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)