Display list of elements in div using js

Question

What would be the optimum strategy to display elements in the js file on the following html page in the div?

html file:

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>SO example</title>
  </head>

  <body>

    <div id="text_table"></div>

  </body>

</html>

css file

#text_table {
  top: 10px;
  right: 10px;
  left: 10px;
}

js file

var testResults = [
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
];

var textTable = document.getElementById("text_table");

for (var i = 0; i < testResults.length; i++) {
  /* leaders.innerHTML += */
};

Desired results is:

JS fiddle example

Easy, but depends on how you want to render it. table, list? — dfsq, May 17 '18 at 07:41

score 3 · Accepted Answer · answered May 17 '18 at 07:41

You also need to have a inner loop for each array inside the parent array:

var testResults = [
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
];

var textTable = document.getElementById("text_table");
var nHTML = '';
for (var i = 0; i < testResults.length; i++) {
   for(var j=0; j<testResults[i].length; j++){
      nHTML+= testResults[i][j]+ ' ';
   }
   nHTML = '<div>' + nHTML + '</div>';
}
textTable.innerHTML = nHTML;

#text_table {
  top: 10px;
  right: 10px;
  left: 10px;
}

<div id="text_table"></div>

You can also use .replace(/,/g, ' ') without the inner loop like this:

var testResults = [
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
  ['Nickname', 'Points', 'Time', 'Difficulty'],
];

var textTable = document.getElementById("text_table");
var nHTML = '';
for (var i = 0; i < testResults.length; i++) {
   nHTML += '<div>' + testResults[i].toString().replace(/,/g, ' ') + '</div>';
}
textTable.innerHTML = nHTML;

#text_table {
  top: 10px;
  right: 10px;
  left: 10px;
}

<div id="text_table"></div>

Display list of elements in div using js

1 Answers1