Print out Javascript array in table

Question

I have this array:

var employees = [
{ \"firstName\":\"John\" , \"lastName\":\"Doe\" }, 
{ \"firstName\":\"Anna\" , \"lastName\":\"Smith\" }, 
{ \"firstName\         


        

Answer 1

Using jQuery you can do:

var txt = '{"employees":[' +
    '{"firstName":"John","lastName":"Doe" },' +
    '{"firstName":"Anna","lastName":"Smith" },' +
    '{"firstName":"Peter","lastName":"Jones" }]}';

// $.parseJSON will parse the txt (JSON) and convert it to an
// JavaScript object. After its call, it gets the employees property
// and sets it to the employees variable
var employees = $.parseJSON( txt ).employees;

var $table = $( "<table></table>" );

for ( var i = 0; i < employees.length; i++ ) {
    var emp = employees[i];
    var $line = $( "<tr></tr>" );
    $line.append( $( "<td></td>" ).html( emp.firstName ) );
    $line.append( $( "<td></td>" ).html( emp.lastName ) );
    $table.append( $line );
}

$table.appendTo( document.body );

// if you want to insert this table in a div with id attribute 
// set as "myDiv", you can do this:
$table.appendTo( $( "#myDiv" ) );

jsFiddle: http://jsfiddle.net/davidbuzatto/aDX7E/

Answer 2

A reusable JSON to table conversion solution for objects in an array type of data structure. Object properties are inserted at the header cells and the values are inserted at the data cells. Sorry for my unorthodox indenting but it makes me feel comfortable with functional programming.

var employees = [
{ "firstName":"John" , "lastName":"Doe" }, 
{ "firstName":"Anna" , "lastName":"Smith" }, 
{ "firstName":"Peter" , "lastName": "Jones" }
],
goods = [
{ "ID":"0001" , "Description":"Cool Table", "Price":"499" , "Color":"Green" }, 
{ "ID":"0002" , "Description":"Ceramic Vase", "Price":"120" , "Color":"Beige" }, 
{ "ID":"0003" , "Description":"Titanium Ashtray", "Price":"999" , "Color":"Titanium Color" },
{ "ID":"0004" , "Description":"Story Book", "Price":"1" , "Color":"Yellow" },
{ "ID":"0005" , "Description":"Chair", "Price":"120" , "Color":"Pink" }
],


tableMaker = o => {var keys = Object.keys(o[0]),
                   rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                                   : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
                       rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),rowMaker(keys,"th"));
                   return "<table>" + rows + "</table>";
                  };

document.write(tableMaker(employees));
document.write(tableMaker(goods));

Answer 3

var table = document.createElement("table");
for (var i = 0; i < employees.length; i++) {
  var row = table.insertRow(-1);
  var firstNameCell = row.insertCell(-1);
  firstNameCell.appendChild(document.createTextNode(employees[i].firstName));
  var lastNameCell = row.insertCell(-1);
  lastNameCell.appendChild(document.createTextNode(employees[i].lastName));
}
document.body.appendChild(table);