Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to iterate through property names of Javascript object?

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 | 

UPDATE

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;     } 
like image 240
eiu165 Avatar asked Dec 09 '09 20:12

eiu165


People also ask

How do you loop through all properties of an object?

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.

Can you iterate through an object JavaScript?

each() method. It can be used to seamlessly iterate over both objects and arrays: $. each(obj, function(key, value) { console.

How do you iterate over key values of an object?

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.

Which loop is used to iterate the properties of an object?

The for/in loop statement is used to iterate a specified variable over all the properties of an object.


1 Answers

Use for...in loop:

for (var key in obj) {    console.log(' name=' + key + ' value=' + obj[key]);     // do some more stuff with obj[key] } 
like image 98
jldupont Avatar answered Sep 23 '22 06:09

jldupont