I would like to get the property names from a Javascript object to build a table dynamically. Example:
var obj = {'fname': 'joe', 'lname': 'smith', 'number': '34'}; for (var i = 0; i < obj.properties.length; i++) { alert(' name=' + obj.properties[i].name + ' value=' + obj.properties[i].value); }
would alert:
name=fname value=joe name=lname value=smith name=number value=34
Then I could build a table using object like this:
var obj = { 'players': [ { 'fname': 'joe', 'lname': 'smith', 'number': '34'} , { 'fname': 'jim', 'lname': 'Hoff', 'number': '12'} , { 'fname': 'jack', 'lname': 'jones', 'number': '84'} ] };
to produce:
| fname | lname | number | |-------|--------|---------| | joe | smith | 34 | | jim | Hoff | 12 | | jack | jones | 84 |
Thanks to the answer, I have produced a table from the Javascript objects using the property names from the first object in the list for the headers:
function renderData() { var obj = { 'players': [ { 'fname': 'joe', 'lname': 'smith', 'number': '34' }, { 'fname': 'jim', 'lname': 'jones', 'number': '12' }, { 'fname': 'jack', 'lname': 'Hoff', 'number': '84' } ] }; var cols = GetHeaders(obj); $('#Output').html(CreateTable(obj, cols)); } function CreateTable(obj, cols) { var table = $('<table></table>'); var th = $('<tr></tr>'); for (var i = 0; i < cols.length; i++) { th.append('<th>' + cols[i] + '</th>'); } table.append(th); for (var j = 0; j < obj.players.length; j++) { var player = obj.players[j]; var tr = $('<tr></tr>'); for (var k = 0; k < cols.length; k++) { var columnName = cols[k]; tr.append('<td>' + player[columnName] + '</td>'); } table.append(tr); } return table; } function GetHeaders(obj) { var cols = new Array(); var p = obj.players[0]; for (var key in p) { //alert(' name=' + key + ' value=' + p[key]); cols.push(key); } return cols; }
Object.key(). It returns the values of all properties in the object as an array. You can then loop through the values array by using any of the array looping methods.
each() method. It can be used to seamlessly iterate over both objects and arrays: $. each(obj, function(key, value) { console.
You have to pass the object you want to iterate, and the JavaScript Object. keys() method will return an array comprising all keys or property names. Then, you can iterate through that array and fetch the value of each property utilizing an array looping method such as the JavaScript forEach() loop.
The for/in loop statement is used to iterate a specified variable over all the properties of an object.
Use for...in
loop:
for (var key in obj) { console.log(' name=' + key + ' value=' + obj[key]); // do some more stuff with obj[key] }
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