68 votos

Obtener los nombres de las propiedades en los objetos JSON

Me gustaría obtener los nombres de las propiedades de un objeto JSON para construir una mesa dinámicamente

ejemplo:

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);
}

alertaría

nombre=nombre valor=joe

name=name value=smith

nombre=número valor=34


entonces podría construir una mesa usando a Json así

var obj = { 'players': [ 
     { 'fname': 'joe', 'lname': 'smith', 'number': '34'} , 
     { 'fname': 'jim', 'lname': 'Hoff', 'number': '12'} , 
     { 'fname': 'jack', 'lname': 'jones', 'number': '84'}   
] };

para producir...

fname lname number

joe smith 34

Jim Hoff 12

jack jones 84

ACTUALIZACIÓN

gracias a la respuesta he producido una tabla de los objetos json usando los nombres de las propiedades del primer objeto de la lista para los encabezados

    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;
    }

117voto

jldupont Puntos 31331
for (var key in obj) {
   alert(' name=' + key + ' value=' + obj[key]);

   // do some more stuff with obj[key]
}

40voto

rab Puntos 1807

En JavaScript 1.8.5, Object.getOwnPropertyNames devuelve una matriz de todas las propiedades encontradas directamente sobre un objeto dado.

Object.getOwnPropertyNames ( obj )

y otro método Object.keys que devuelve una matriz que contiene los nombres de todos los objetos dados propio propiedades enumerables.

Object.keys( obj )

Yo usé forEach para listar los valores y claves en el objeto, igual que for (var key in obj) ..

[].forEach.call( Object.keys( obj ), function( key ){    
    console.log( key , obj[key] );
});

Todo esto son nuevas características en ECMAScript , las polillas getOwnPropertyNames , keys no es compatible con los navegadores antiguos.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X