Iterate through a 2d Array and listing all of the entries

Question

I have a function that iterates through a 2d Array, every Array has a song and an interpreter and the function is supposed to run a loop and list every song with it's interpreter. The problem is that it only lists the last song and interpreter, what am I missing so it lists all of them?:

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

+= instead of =.

Marvin
– Marvin

2016-11-03 20:42:56 +00:00
Commented Nov 3, 2016 at 20:42 — Marvin
– Marvin, Commented Nov 3, 2016 at 20:42

gh9 · Accepted Answer · 2016-11-03 20:43:12Z

4

That is because you are setting the innerHtml every time you loop, so it will over-write itself every time except the last. You want to do this instead

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

answered Nov 3, 2016 at 20:43

gh9

10.8k12 gold badges65 silver badges98 bronze badges

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

3 Comments

Sergi Over a year ago

Of course...Thanks for pointing that out. Accepting when it allows me.

gh9 Over a year ago

@sergi if this fixed your issue will you mark as your answer please

Sergi Over a year ago

Sorry, looks like I forgot to do so.

ONMNZ · Accepted Answer · 2016-11-03 20:47:51Z

0

Here's one way. Hope this helps.

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>

answered Nov 3, 2016 at 20:47

ONMNZ

3684 silver badges15 bronze badges

Collectives™ on Stack Overflow

Iterate through a 2d Array and listing all of the entries

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related