Geek Answers Handbook

Listing a Javascript array in a table

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 whole array as an html table. How to do it?

I tried this, but could only get the final name 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>
+4
source share
3 answers

With jQuery you can:

 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/

+8
source 
 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);
+8
source

A reusable JSON to table conversion solution for objects in an array of data structure type. Object properties are inserted into header cells, and values ​​are inserted into data cells. Sorry for my unorthodox indentation, 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));
+1
source

More articles:


All Articles