Menu
I have this array:
var employees = [
{ "firstName":"John" , "lastName":"Doe" },
{ "firstName":"Anna" , "lastName":"Smith" },
{ "firstName":"Peter" , "lastName": "Jones" }
];
and I would like to print the entire array out as a html table. How would I accomplish this?
I tried this but could only get the final name the print:
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br />
Last Name: <span id="lname"></span><br />
</p>
<script type="text/javascript">
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
var obj = eval ("(" + txt + ")");
for (i=0; i<txt.length; i++){
document.getElementById("fname").innerHTML=obj.employees[i].firstName
document.getElementById("lname").innerHTML=obj.employees[i].lastName
}
</script>
</body>
</html>
453
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/
67
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);
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));If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
