title: Print array elements into their respective column in JavaScript
body: <p>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....</p>
  
  <p>JavaScript File (The data file):</p>
  
  <pre><code>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
  
  };
  </code></pre>
  
  <p>HTML File:</p>
  
  <pre><code>&lt;!DOCTYPE html /&gt;
  &lt;html&gt;
  &lt;title&gt;The Data Structure&lt;/title&gt;
  &lt;body&gt;
  
  &lt;script type="text/javascript" src="TheData.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      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);
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>