JavaScript: Appending data from a 2D array in a loop
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
- Online 3.2
- Appointment 2.9
- 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)
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>
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)
