遍歷2d數組並列出所有條目

Question

我有一個遍歷2d數組的函數，每個數組都有一首歌和一個解釋器，並且該函數應該運行一個循環並使用其解釋器列出每首歌曲。 問題是它只列出了最后一首歌和解釋器，我想念什么，所以它列出了所有這些？

HTML：

<ul id="2d"> </ul>

JS

var twoDArray = [
  ["I did it my way", "Frank Sinatra"],
  ["Respect", "Areta Franklin"],
  ["Imagine", "John Lennon"]
];

function iterative( songs ) {
  for ( var i = 0; i < songs.length; i += 1) {
    document.getElementById("2d").innerHTML =  "<li>" + songs[i][0] + " by " + songs[i][1] + "</li>";
 }
}

iterative(twoDArray);

Answer 1

這是因為每次循環時都要設置innerHtml，所以除最后一次外，它將每次都覆蓋自身。 您想這樣做

  document.getElementById("2d").innerHTML +=  "<li>" + songs[i][0] + " by " + songs[i][1] + "</li>";

Answer 2

這是一種方法。 希望這可以幫助。

 const twoDArray = [ ["I did it my way", "Frank Sinatra"], ["Respect", "Areta Franklin"], ["Imagine", "John Lennon"] ]; const ul = document.querySelector('ul'); twoDArray.forEach(pair => { const li = `<li>${pair[0]} by ${pair[1]}</li>`; ul.insertAdjacentHTML('beforeend', li); }) 

 HTML: <ul id="2d"> </ul>