eloquent js chapter 13 dom ex1 table

building a table

by Aswin Devarajan

JavaScript

var dataObject = [{
  'firstName': 'Aswin',
  'lastName': 'Devarajan',
  'age': '22'
}, {
  'firstName': 'Aswathy',
  'lastName': 'Devarajan',
  'age': '21'
}]

var testObject = [{
		'h1' : 'viva', 
    'h2' : 'la', 
    'h3' : 'vida'
}, {
	'h1' : 'scarlet', 
  'h2' : 'johnson', 
  'h3' : 'patanahi'
}]

function buildUp(data) {
  // get the data object and crawl through header names 
  console.log(data);
  fragment = document.createDocumentFragment();
  var headerLength = (Object.getOwnPropertyNames(data[0])).length;
  var objectLength = (data.length);
  table = document.createElement('table');
  tr = document.createElement('tr');
  table.appendChild(tr);
  header = Object.keys(data[0]);
  for (var i = 0; i < headerLength; i++) {
    th = document.createElement('th');
    text = document.createTextNode(header[i]);
    th.appendChild(text);
    tr.appendChild(th);
  }
  for (var j = 0; j < objectLength; j++) {
		var tr = document.createElement('tr'); 
    var tableData = data[j];
    for (var x=0; x< headerLength; x++){
    	var td = document.createElement('td');
      var text = document.createTextNode(data[j][header[x]]);
    	td.appendChild(text);
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }
  fragment.appendChild(table);
  document.body.appendChild(fragment);
}

//buildUp(dataObject);
buildUp(testObject);