Display array in table in javascript

Question

My goal is to take an array and display each element in a table. My problem is i feel im missing something it is my second month of js. Any one got a idea?

  var names = ["Ling, Mai","Johnson, Jim", "Zarnecki, Sabrina", "Jones, Chris","Jones, Aaron",  "Swift, Geoffrey", "Xiong, Fong"];
    console.log(names.length);// display array length
    console.log(names);//display array



//onclick() show array in table 
//src w3schools
function display() {

//-----------------------------------------------------
//src w3schools

    var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");
    document.body.appendChild(x);

    var y = document.createElement("TR");
    y.setAttribute("id", "myTr");
    document.getElementById("myTable").appendChild(y);
//-------------------------------------------------------

// //split up display to output each item in array in its own box    
//     // https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript
    var index, len;
//     // var a = ["a", "b", "c"];
    for (index = 0, len = names.length; index < len; ++index) {

        console.log(names[index]);

        var t = document.createTextNode(names[index]);
        z.appendChild(t);
    }

    var t = document.createTextNode("meow");

    document.getElementById("myTr").appendChild(z);
    console.log(z);

}//End of display()

It ends at bottom. It was more of a mental grouping then anything. — Walter Purvis, Sep 06 '17 at 01:15

score 1 · Answer 1 · answered Sep 06 '17 at 01:36

What are you trying to do? Something like this:

//<![CDATA[
// external.js
var pre = onload, doc, bod, C, E; // for use on other loads
onload = function(){
if(pre)pre(); // change var name for other loads

doc = document; bod = doc.body;
C = function(tag){
  return doc.createElement(tag);
}
E = function(id){
  return doc.getElementById(id);
}
var names = ['Ling, Mai', 'Johnson, Jim', 'Zarnecki, Sabrina', 'Jones, Chris', 'Jones, Aaron', 'Swift, Geoffrey', 'Xiong, Fong'];
var people = E('people');
for(var i=0,nm,row,fn,ln,l=names.length; i<l; i++){
  nm = names[i].split(/,\s+/); row = C('tr'); fn = C('td'); ln = C('td');
  fn.innerHTML = nm[1]; ln.innerHTML = nm[0]; row.appendChild(fn); row.appendChild(ln);
  people.appendChild(row);
}

}
//]]>

/* external.css */
html,body{
  margin:0; padding:0;
}
.main{
  width:960px; background:#000; color:#fff; padding:20px; margin:0 auto;
}
table{
  border-collapse:collapse; width:400px;
}
td{
  border:1px solid #fff; padding-left:5px;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <meta name='viewport' content='width=device-width' />
    <title>Lame Table</title>
    <link type='text/css' rel='stylesheet' href='external.css' />
    <script type='text/javascript' src='external.js'></script>
  </head>
<body>
  <div class='main'>
    <table><thead><tr><th>First Name</th><th>Last Name</th></tr></thead><tbody id='people'></tbody></table>
  </div>
</body>
</html>

score 0 · Accepted Answer · answered Sep 06 '17 at 01:18

This will work for you. Create td through document.createElement and then append document.createTextNode to that. Also, create your tr in loop and add td to tr. See few more examples here.

Create table using Javascript

var names = ["Ling, Mai", "Johnson, Jim", "Zarnecki, Sabrina", "Jones, Chris", "Jones, Aaron", "Swift, Geoffrey", "Xiong, Fong"];
console.log(names.length); // display array length
console.log(names); //display array

//onclick() show array in table 
//src w3schools
function display() {

  //-----------------------------------------------------
  //src w3schools

  var x = document.createElement("TABLE");
  x.setAttribute("id", "myTable");
  x.setAttribute("border", "1");
  document.body.appendChild(x);


  //-------------------------------------------------------

  // //split up display to output each item in array in its own box    
  //     // https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript
  var index, len;
  //     // var a = ["a", "b", "c"];
  for (index = 0, len = names.length; index < len; ++index) {
    var y = document.createElement("TR");
    y.setAttribute("id", "myTr");
    document.getElementById("myTable").appendChild(y);
    console.log(names[index]);

    var t = document.createElement("TD");
    t.appendChild(document.createTextNode(names[index]));
    y.appendChild(t);
  }


}
display();

You sir deserve an applie for apple related sales pitches. Cause this answer bit down to core of my problem. — Walter Purvis, Sep 06 '17 at 01:23

score 0 · Answer 3 · answered Sep 06 '17 at 01:36

Some comments on your accepted answer:

The ID attribute should be unique to each element. That's why it is called and ID. This code produces N number of trs with the same ID.
Variables index and len are created in the global scope for no purpuse.
index = 0, len = names.length; index < len; equals index = 0; index < names.length. Saves you creating a new variable of len.
The best practice as of now is to iterate through array elements using for...in or for...of, rather than for(...;...;...).
Another best practice is to use const for constant variables and let for the local scope variables.

Look at the below code for comparison.

var names = ["Ling, Mai","Johnson, Jim", "Zarnecki, Sabrina", "Jones, Chris","Jones, Aaron",  "Swift, Geoffrey", "Xiong, Fong"];
function display() {
    // Create the table
    var x = document.createElement("TABLE");
    x.setAttribute("id", "myTable");
    document.body.appendChild(x);

    for(name of names) {
        // Create a unique TR id
        const thisTrId = String("myTr"+names.indexOf(name));

        // Create the TR and append to the table
        let y = document.createElement("TR");
        y.setAttribute("id", thisTrId );
        document.getElementById("myTable").appendChild(y);    
        
        // Create the TD and append to the above TR
        let t = document.createElement("TD");
        t.appendChild(document.createTextNode(name));
        y.appendChild(t);
    }
}
display();

#myTable td {
  border: 1px solid black;
}

Display array in table in javascript

3 Answers3