Print array elements into their respective column in JavaScript

Question

I have a requirement to take an array in JavaScript and print it out into the screen in a table-like format. I can get the column headers to print without issue but what I'm struggling with is getting the data to print under those columns in a table like manner....

JavaScript File (The data file):

var FirstNames = new Array();
var LastNames = new Array();

 FirstNames[0] = 'First1';
 FirstNames[1] = 'First2';
 FirstNames[2] = 'First3';
 FirstNames[3] = 'First4';

 LastNames[0] = 'Last1';
 LastNames[1] = 'Last2';
 LastNames[2] = 'Last3';
 LastNames[3] = 'Last4';

var PersonalInformation = {

   FirstName : FirstNames,
   LastName : LastNames

};

HTML File:

<!DOCTYPE html />
<html>
<title>The Data Structure</title>
<body>

<script type="text/javascript" src="TheData.js"></script>
<script>
    function printObj(theObject){
        var theOutputTable = '';
        var theOutputHeader = '';

        //Print the Column Headers for the table.
        for (var theColumnHeaders in theObject){
            var CreatetheTagTR = document.createElement('th');
            var theColumnText = document.createTextNode(theColumnHeaders);
            CreatetheTagTR.appendChild(theColumnText);
            document.body.appendChild(CreatetheTagTR);
        }

        //Eventually, print data in the repsective columns by row.
        for (var property in theObject){
            theOutput = theObject[property];
            var theElement = document.createElement('tr');
            var theText = document.createTextNode(theOutput);
            theElement.appendChild(theText);
            document.body.appendChild(theElement);
        }   
    }
    printObj(PersonalInformation);
</script>
</body>
</html>

Are you really appending a table row to the document body, not to a table? — user2625787
– user2625787, Commented Aug 12, 2013 at 23:34
Just assume worst case scenario. Should I be doing it elsewhere? — mwilson
– mwilson, Commented Aug 12, 2013 at 23:37
It looks like you have your row data nested inside your header — Chris Rockwell
– Chris Rockwell, Commented Aug 12, 2013 at 23:37
First create a table. Then a row. Populate table cells with your text data. Text does not go directly in row elements. — user2625787
– user2625787, Commented Aug 12, 2013 at 23:42
you are still not creating a <table> element to add rows, heading cells and data cells into it. (just like @Jeffman said :D ) — blurfus
– blurfus, Commented Aug 12, 2013 at 23:42

Kristian · Accepted Answer · 2013-08-13 16:41:43Z

2

You'll have an easier time printing a table of values if you rearrange your data such that it looks like this...

in javascript:

//structure the array this way
var names = [
    { first: 'john', last: 'smith' },
    { first: 'frank', last: 'ricard' }
    { first: 'jimi', last: 'hendrix' }
];


//Then, you can simply iterate through the array and build a table.
for(var i = 0; names.length; i++) {
    var name = names[i];
    var first = name.first
    var last = name.last

    //build your table markup in here.
}

or in php:

//structure array this way
$names = array(
    array('first' => 'john', 'last'=>'smith'),
    array('first' => 'frank', 'last'=>'ricard'),
    array('first' => 'jimi', 'last'=>'hendrix')
);

//iterate through array this way
foreach($names as $name) {
    $first = $name['first'];
    $last = $name['last'];
    //build your table markup in here.
}

edited Aug 13, 2013 at 16:41

answered Aug 12, 2013 at 23:38

Kristian

22k19 gold badges108 silver badges184 bronze badges

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

Comments

justkash · Accepted Answer · 2013-08-12 23:50:44Z

If you are trying to print out the contents of a JavaScript array into the DOM as a table, then have a look at the following example.

var firstNames = ['Marc', 'John', 'Drew', 'Ben'];
var lastNames = ['Wilson', 'Smith', 'Martin', 'Wilcox'];

var htmlStr = "<tbody>";
for(int i=0; i < firstNames.length; ++i) {
    htmlStr += "<tr>";
    htmlStr += "<td>" + firstNames[i] + "</td>";
    htmlStr += "<td>" + lastNames[i] + "</td>";
    htmlStr += "</tr>";
}
htmlStr += "</tbody>"

In this example I have created the tbody of your table and then populated it with the contents of your two arrays. I have split it into more steps than needed so that it is easier to see what is going on. Once you understand what is going on here, you can add the header to this and then add it to the DOM.

StackSlave · Accepted Answer · 2013-08-13 00:44:07Z

I would do something more like:

var doc = document;
function E(e){
  return doc.getElementById(e);
}
function PersonalInformation(){
  function C(e){
    return doc.createElement(e);
  }
  this.FirstNameTableHead = 'First Name';
  this.LastNameTableHead = 'Last Name';
  this.FirstNames = ['Marc', 'John', 'Drew', 'Ben'];
  this.LastNames = ['Wilson', 'Smith', 'Martin', 'Wilcox'];
  this.addName = function(first, last){
    this.FirstNames.push(first);
    this.LastNames.push(last);
  }
  this.createTable = function(){
    var nd = C('div'), tbl = C('table'), tr1 = C('tr'), th1 = C('th'), th2 = C('th');
    var fnh = doc.createTextNode(this.FirstNameTableHead);
    var lnh = doc.createTextNode(this.LastNameTableHead);
    th1.appendChild(fnh); th2.appendChild(lnh); tr1.appendChild(th1);
    tr1.appendChild(th2); tbl.appendChild(tr1);
    var fn = this.FirstNames, ln = this.LastNames;
    for(var i in fn){
      var tr = C('tr'), td1 = C('td'), td2 = C('td');
      var tn1 = doc.createTextNode(fn[i]), tn2 = doc.createTextNode(ln[i]);
      td1.appendChild(tn1); td2.appendChild(tn2); tr.appendChild(td1);
      tr.appendChild(td2); tbl.appendChild(tr);
    }
    nd.appendChild(tbl);
    return nd.innerHTML;
  }
}
var PI = new PersonalInformation();
E('wherever').innerHTML = PI.createTable();

This Constructor creates a table with your First and Last Names, and more, and returns it as a string. You can use .innerHTML to insert it. See the Fiddle.

Collectives™ on Stack Overflow

Print array elements into their respective column in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related