JavaScript: добавление данных из 2D-массива в цикле

Question

У меня есть двухмерный массив, в который я пытаюсь добавить его значения. Я предоставил 2 фрагмента кода; Первый - это пример того, что я пытаюсь выполнить с помощью sh второго фрагмента кода. В первом фрагменте кода я вручную добавляю данные для каждого отдельного индекса.

По сути, я пытаюсь создать список, который выглядит как

1. Online 3.2
2. Назначение 2.9
3. Store 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>";

В моем втором фрагменте кода я пытаюсь пройти l oop через свой массив и увеличить данные, но я не могу разделить индексы в массиве, например, мой текущий результат:

<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 во второе измерение массива вместо первого.

Я переключился на синтаксис строка шаблона , потому что в данном случае он немного более лаконичен.

Я также использовал индекс 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)