JavaScript: Appending data from a 2D array in a loop

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

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)

cam · Accepted Answer · 2020-07-14 02:17:34Z

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>

answered Jul 14, 2020 at 2:17

cam

3,7301 gold badge16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

maimok Over a year ago

Thank you for your response, just to get a little more detail and understand everything fully. The <p>${i + 1}. is to increment + 1 every time which then returns the results 1., 2.. 3. etc.. did I understand that correctly?

cam Over a year ago

Not quite correect, the <p>${i + 1}. is what outputs the 1. , 2. , etc. It's taking the index of the loop i and adding 1 to it because the loop starts at index 0 (let i = 0). Without the + 1 it would be be 0. , 1. , etc

cam Over a year ago

Oh re-reading your question I think you may have actually understood correctly, I just interpreted incorrectly 😅

Barmar · Accepted Answer · 2020-07-14 02:16:45Z

0

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)

answered Jul 14, 2020 at 2:16

Barmar

789k57 gold badges554 silver badges669 bronze badges

Collectives™ on Stack Overflow

JavaScript: Appending data from a 2D array in a loop

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related